Port to vite #140

bluskript · 2022-06-14T14:12:18Z

Status

Bootswatch needed to be removed due to SASS issues. The UI still looks pretty much the same, but colors are wrong.
This PR might also be used to solve #116 as a result.

Items to test:

Production build
CI
Check that all UI still works correctly
update README.md with new dev and release building instructions

bluskript · 2022-06-15T13:21:06Z

I revamped a large portion of the UI, though a lot of things are broken (since i'm making a lot less stuff use bootstrap and instead use Tailwind). Note that the dark theme was just a thing i copypasted from another project and a light theme can be added super easily when its needed.

There's still some visuals that were lost but i'll bring them back better than they were before soon enough.

Also, as mentioned before, a lot of the UI styling is gone because of SASS issues, which is why it doesn't look good as the main branch, at least for the buttons.

nathanleclaire · 2022-06-15T18:14:55Z

Fun! I'm a bit confused though, I thought it the migration to vite was just about dev tooling. Maybe split them up into separate PRs?

bluskript · 2022-06-15T18:23:05Z

It's kind of a weird one. Vite doesn't like Bootswatch because of its use of url() with relative imports, see vitejs/vite#7651.

This means if this PR merges as is then a lot of the buttons and styling will revert back to the default which doesn't look that great. Since I was planning to tackle #116 anyway, I was going to solve the issue by avoiding Bootstrap for the most part and using Tailwind to style the UI. A lot of the UI needed a styling cleanup anyway.

nathanleclaire · 2022-06-15T18:28:26Z

Got it. I'm open to it if @SvenDowideit is! I dig the screenshot.

SvenDowideit · 2022-06-16T00:50:23Z

src/renderer/App.tsx

 import {
-  useConfigState,
-  setConfigValue,
  ConfigKey,


I presume these ordering changes are because your local prettifier settings are arguing with ours.

I'd love these settings to be in the project only - so there's no chance that a user's personal choices bleed over.

Argh, yeah this is always a classic frustrating bit with frontend dev - there's so many tools that could interfere with the formatting guidelines. A pre-commit hook would probably be the best approach since it enforces that everything is correct right at the end. I've noticed that there seems to be one but it doesn't run for some reason. I'll look into it.

SvenDowideit · 2022-06-16T01:00:12Z

for me, getting rid of erb is a positive - very curious to see how it all hangs together in the end

SvenDowideit · 2022-06-22T07:30:32Z

package.json

    "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
-    "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
-    "postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
-    "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",


its probably a nice thing to defined npm run start === npm run dev - for the new developer, the latter tells them little about what it does (does it start an editor?)

SvenDowideit · 2022-06-22T07:31:21Z

package.json

+    "build:renderer": "vite build --config ./src/renderer/vite.config.ts",
+    "start:main": "npm run build:main && cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only ./src/main/main.ts",
+    "start:renderer": "vite dev --config ./src/renderer/vite.config.ts",
+    "package": "rimraf ./release && npm run build && electron-builder build --publish never",


I'm guessing you've got a bunch of README.md info you want to update?

SvenDowideit · 2022-06-22T07:33:44Z

src/renderer/App.tsx

@@ -73,140 +51,89 @@ declare global {
  }
 }

-function TooltipNavItem({


does this mean there are no defaults anymore?

I couldn't exactly find any reason for defaults to be specified. If a nav item was defined, I'd assume that the author of the code would need to fill in all of the properties correctly, right? Why define defaults if they're never (or rather shouldn't) be used?

when i'm prototyping, i appreciate defaults lots.

SvenDowideit · 2022-06-22T07:38:50Z

the size of the diff doesn't worry me, I'm more interested in why choices were made - like replacing higherlevel components with plain div with classes - that always feels like a backward step to me.

very much needs docs to tell us what changed, and how new devs build, run and ship things.

(and presumably we're still waiting on your todo's in this pr)

oh, and the rebase for conflicts :)

bluskript · 2022-06-22T07:46:05Z

Much of the layouting pains in the bootstrap version of the app was due to use of Rows incorrectly. Due to Rows containing gutters, it would misalign things because of the negative margin. Tailwind goes for a more simplistic approach by providing atomic classes for your styles. This is more nice than higher level components because:

a) its closer to bare HTML and CSS which may seem like a downside but makes it easier to reason about when it comes to layouting issues
b) more compatible with tailwind's spacing styling. Bootstrap's layouting is very similar to Tailwind's, Tailwind's is just much larger and closer to the original CSS styles.

While bootstrap's Rows and Cols and other high level Bootstrap components appear to be helpful, they also make customizeability much more of a challenge and introduce more room for issues. I've learned its easier honestly to just do the layouting with raw divs, at least as long as Tailwind is there to provide easy atomic classes for it. Not to mention, it's yet another react component in the virtual dom which has its own overhead. Doesn't actually matter, but worth putting out there.

nathanleclaire · 2022-06-22T18:53:33Z

npm run package seems to be still working 👍

SvenDowideit · 2022-06-23T07:44:07Z

README.md

-$ npm install --legacy-peer-deps && \
-    (cd ./release/app/ && npm install --legacy-peer-deps) && \
-    npm install --legacy-peer-deps
+$ npm install --legacy-peer-deps


do we need the --legacy-peer-deps anymore? (npm i worked for me on my not-clean box)

package.json

SvenDowideit

YUP, very LGTM

excellent progress

bluskript added 3 commits June 14, 2022 10:08

port most functionality to vite

01303a5

fix most alignment issues, but introduces other useability issues

16b506c

revamp most UI, breaks certain things though

a521ea8

attempt to make filtering UX nicer

4dd67c4

SvenDowideit reviewed Jun 16, 2022

View reviewed changes

bluskript added 2 commits June 21, 2022 16:40

clean up styling and apply standard formatting

8fc69f0

finish ui overhaul

bcb4f30

bluskript marked this pull request as ready for review June 22, 2022 05:53

SvenDowideit reviewed Jun 22, 2022

View reviewed changes

bluskript added 6 commits June 22, 2022 12:24

fix split pane merge conflicts

251a144

fix prod build

ac38473

fix program filter

698381c

fix eslint

9c9ff51

fix CI

14319de

fix CI again

ed69d94

bluskript added 3 commits June 22, 2022 14:55

attempt to fix eslint ignore

91c7dfd

add back default props to tooltip nav item

76d3409

update README

9b07a45

SvenDowideit reviewed Jun 23, 2022

View reviewed changes

package.json Outdated Show resolved Hide resolved

bump version and merge package.jsons

8c4a243

SvenDowideit approved these changes Jun 23, 2022

View reviewed changes

remove legacy peer deps flag

745c74d

SvenDowideit merged commit 429f9f0 into workbenchapp:main Jun 23, 2022

SvenDowideit added this to the 0.4.0 milestone Jun 23, 2022

SvenDowideit mentioned this pull request Jun 27, 2022

port solana workbench to vite from webpack #139

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Port to vite #140

Port to vite #140

bluskript commented Jun 14, 2022 •

edited

bluskript commented Jun 15, 2022 •

edited

nathanleclaire commented Jun 15, 2022

bluskript commented Jun 15, 2022 •

edited

nathanleclaire commented Jun 15, 2022

SvenDowideit Jun 16, 2022

bluskript Jun 16, 2022

SvenDowideit commented Jun 16, 2022

SvenDowideit Jun 22, 2022

SvenDowideit Jun 22, 2022

SvenDowideit Jun 22, 2022

bluskript Jun 22, 2022

SvenDowideit Jun 22, 2022

SvenDowideit commented Jun 22, 2022 •

edited

bluskript commented Jun 22, 2022 •

edited

nathanleclaire commented Jun 22, 2022

SvenDowideit Jun 23, 2022

SvenDowideit left a comment

Port to vite #140

Port to vite #140

Conversation

bluskript commented Jun 14, 2022 • edited

Status

bluskript commented Jun 15, 2022 • edited

nathanleclaire commented Jun 15, 2022

bluskript commented Jun 15, 2022 • edited

nathanleclaire commented Jun 15, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SvenDowideit commented Jun 16, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SvenDowideit commented Jun 22, 2022 • edited

bluskript commented Jun 22, 2022 • edited

nathanleclaire commented Jun 22, 2022

Choose a reason for hiding this comment

SvenDowideit left a comment

Choose a reason for hiding this comment

bluskript commented Jun 14, 2022 •

edited

bluskript commented Jun 15, 2022 •

edited

bluskript commented Jun 15, 2022 •

edited

SvenDowideit commented Jun 22, 2022 •

edited

bluskript commented Jun 22, 2022 •

edited