switch laravel mix to vite #423

joshreisner · 2024-10-07T00:03:41Z

creating this as a draft PR of three issues, and i don't know enough yet about cjs vs es modules to solve them. the issues are:

shipping this would require us to add type="module" to everyone's app scripts
also npm run jest doesn't run because of the error:

ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'tsml-ui/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

finally, it's creating an extra app script for mapbox-gl in dist/assets/ which is not ideal -- not sure what to do about that

netlify · 2024-10-07T00:04:01Z

✅ Deploy Preview for tsml-ui ready!

Name	Link
🔨 Latest commit	`a4df76b`
🔍 Latest deploy log	https://app.netlify.com/sites/tsml-ui/deploys/67094620aab2ff00084a4e65
😎 Deploy Preview	https://deploy-preview-423--tsml-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

joshreisner · 2024-10-11T14:43:01Z

example.html

@@ -53,6 +53,6 @@
          : {},
      };
    </script>
-    <script src="/app.js" async></script>
+    <script src="/src/app.tsx" type="module" async></script>


this is just the example - the actual embed codes haven't changed

joshreisner · 2024-10-11T14:46:41Z

.eslintrc.js

-    Lang: 'readonly',
-    TSMLReactConfig: 'readonly',
-    Translation: 'readonly',
-  },


i could not get jest to recognize the global types defined in index.d.ts so they're no longer global - also TSMLReactConfig got renamed to Settings

joshreisner · 2024-10-11T14:49:02Z

package.json

-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "luxon": "^3.5.0",
+    "mapbox-gl": "^3.7.0",


it complained that this was missing - we were referencing files in it - so now it's an explicit dependency

joshreisner · 2024-10-11T14:50:22Z

public/data/aasepia.json

i removed all these test files in favor of a single example.html - i think this is more vite-y

joshreisner · 2024-10-11T14:54:02Z

src/helpers/filter-meeting-data.ts

+          ...state.input[filter]
+            .map(key => getIndexByKey(state.indexes[filter], key)?.slugs ?? [])
+            .flat(),
+        ]);


had to fix all the // @ts-expect-errors for jest - these places are the only places where syntax changes. i tested this of course but if there's a regression it's in one of these places

joshreisner · 2024-10-11T14:56:15Z

src/helpers/format-search-params.ts

fun fact we weren't using this file

joshreisner · 2024-10-12T15:23:57Z

i've switched out https://aasanjose.org/meetings to use the new app bundle

gkovats · 2024-10-13T17:43:23Z

vite.config.ts

+        inlineDynamicImports: true,
+      },
+    },
+    target: 'es2021',


@joshreisner when I add here:
copyPublicDir: false,
It doesn't copy logo.svg and a few pointless files in /dist folder. Was just poking at various config options.

thanks - logo.svg is needed though for the https://tsml-ui.code4recovery.org/ homepage 👍

Oh! This is the public page, neat, makes sense.

gkovats · 2024-10-13T17:44:51Z

tsconfig.app.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/vite-env.d.ts","./src/components/alert.tsx","./src/components/button.tsx","./src/components/controls.tsx","./src/components/dropdown.tsx","./src/components/icon.tsx","./src/components/link.tsx","./src/components/loading.tsx","./src/components/map.tsx","./src/components/meeting.tsx","./src/components/table.tsx","./src/components/title.tsx","./src/components/tsmlui.tsx","./src/components/index.ts","./src/helpers/analytics.ts","./src/helpers/calculate-distances.ts","./src/helpers/filter-meeting-data.ts","./src/helpers/flatten-and-sort-indexes.ts","./src/helpers/format-address.ts","./src/helpers/format-array.ts","./src/helpers/format-conference-provider.ts","./src/helpers/format-directions-url.ts","./src/helpers/format-feedback-email.ts","./src/helpers/format-ics.ts","./src/helpers/format-slug.ts","./src/helpers/format-string.ts","./src/helpers/format-url.ts","./src/helpers/get-index-by-key.ts","./src/helpers/index.ts","./src/helpers/load-meeting-data.ts","./src/helpers/query-string.ts","./src/helpers/settings.ts","./src/helpers/translate-google-sheet.ts","./src/helpers/user-agent.ts","./src/i18n/en.ts","./src/i18n/es.ts","./src/i18n/fr.ts","./src/i18n/index.ts","./src/i18n/ja.ts","./src/i18n/nl.ts","./src/i18n/pt.ts","./src/i18n/sk.ts","./src/i18n/sv.ts","./src/styles/alert.ts","./src/styles/button.ts","./src/styles/controls.ts","./src/styles/dropdown.ts","./src/styles/global.ts","./src/styles/index.ts","./src/styles/loading.ts","./src/styles/map.ts","./src/styles/meeting.ts","./src/styles/table.ts","./src/styles/variables.ts","./src/types/jsondata.ts","./src/types/meeting.ts","./src/types/metatype.ts","./src/types/settings.ts","./src/types/state.ts","./src/types/translation.ts","./src/types/index.ts"],"version":"5.6.2"}


When I build this locally, this file changes - /src/components/alert.tsx becomes /src/components/Alert.tsx, etc. Case of files match local file paths. Not sure if this is a difference between iOS and Linux.

huh, it might be mac vs linux! we can keep an eye on that - i'd kind of prefer this file to use the correct casing

gkovats

@joshreisner Clearly it builds and works. Congrats on getting it to work! I know Vite is the new big build tool, it's opinionated and simplifies stuff. Seems nice, not having to run 2 commands to see locally. I want to update /example.html shortly to allow for multiple test meetings, or we'd just change it to test production issues as needed and revert before commit.

Like I mentioned in chat, only things I saw:

adds 400kb to size, but there's a lot of polyfill voodoo a build tool adds, figure it's in that.
I don't know why it requires async on my local, but that's a concern if we make this version live. Don't know if you can make every user also update TSML, or folks that have one-off html embeds. Maybe we could offer some helper JS that just embeds the latest script tag necessary for TSML-UI?
looking at the size, it just prompted me to want to try another map library, just to possibly trim down the size of the widget. I know, bandwidth is cheap, gzip, and caching and all, but some folks are still stuck on 3G, so little things help.

joshreisner · 2024-10-13T19:36:52Z

yeah, shifting over to es modules would probably help too, since that lib file would get cached, i think.

having our users switch away from mapbox to a different service might be a headache, if there's a way to avoid that. or maybe we might look at other mapbox configurations, maybe we don't need all these dependencies?

i haven't been able to repro this async issue but it might make sense to release another version of TSML with that option in it so if users run into problems they can always update

This reverts commit cb53072.

* Revert "use terser to fix #426 (#427)" This reverts commit 4c80c4e. * Revert "switch laravel mix to vite (#423)" This reverts commit cb53072.

joshreisner added 2 commits October 6, 2024 16:57

switching laravel mix to vite

85081d7

Merge branch 'main' into 395-switch-to-vite

d022490

joshreisner requested a review from gkovats October 7, 2024 00:03

joshreisner linked an issue Oct 7, 2024 that may be closed by this pull request

switch to vite #395

Closed

joshreisner added 2 commits October 10, 2024 08:09

fix build target

b32e2f4

trying to fix jest issues

1648a8f

joshreisner changed the title ~~switching laravel mix to vite~~ switch laravel mix to vite Oct 10, 2024

joshreisner added 3 commits October 10, 2024 18:44

refactors for jest

08e5587

removing ts-expect-errors

99ac372

fixing issues

a0f439c

joshreisner commented Oct 11, 2024

View reviewed changes

src/helpers/format-search-params.ts Outdated

Copy link

Contributor Author

joshreisner Oct 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fun fact we weren't using this file

fixing tests

c641108

joshreisner marked this pull request as ready for review October 11, 2024 15:22

joshreisner added 3 commits October 11, 2024 08:26

update workflow

c743304

fix build script

f8af94f

try to improve efficiency of build step

a4df76b

joshreisner self-assigned this Oct 11, 2024

gkovats reviewed Oct 13, 2024

View reviewed changes

gkovats approved these changes Oct 13, 2024

View reviewed changes

joshreisner merged commit cb53072 into main Oct 19, 2024
6 checks passed

joshreisner added a commit that referenced this pull request Nov 13, 2024

Revert "switch laravel mix to vite (#423)"

69f1c27

This reverts commit cb53072.

joshreisner added a commit that referenced this pull request Nov 15, 2024

Revert back to Laravel Mix (#428)

205cc6d

* Revert "use terser to fix #426 (#427)" This reverts commit 4c80c4e. * Revert "switch laravel mix to vite (#423)" This reverts commit cb53072.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

switch laravel mix to vite #423

switch laravel mix to vite #423

joshreisner commented Oct 7, 2024 •

edited

Loading

netlify bot commented Oct 7, 2024 •

edited

Loading

joshreisner Oct 11, 2024

joshreisner Oct 11, 2024

joshreisner Oct 11, 2024

joshreisner Oct 11, 2024

gkovats Oct 13, 2024

joshreisner Oct 11, 2024

joshreisner Oct 11, 2024

joshreisner commented Oct 12, 2024

gkovats Oct 13, 2024

joshreisner Oct 13, 2024

gkovats Oct 13, 2024

gkovats Oct 13, 2024

joshreisner Oct 13, 2024

gkovats left a comment

joshreisner commented Oct 13, 2024

		@@ -0,0 +1 @@
		{"root":["./src/app.tsx","./src/vite-env.d.ts","./src/components/alert.tsx","./src/components/button.tsx","./src/components/controls.tsx","./src/components/dropdown.tsx","./src/components/icon.tsx","./src/components/link.tsx","./src/components/loading.tsx","./src/components/map.tsx","./src/components/meeting.tsx","./src/components/table.tsx","./src/components/title.tsx","./src/components/tsmlui.tsx","./src/components/index.ts","./src/helpers/analytics.ts","./src/helpers/calculate-distances.ts","./src/helpers/filter-meeting-data.ts","./src/helpers/flatten-and-sort-indexes.ts","./src/helpers/format-address.ts","./src/helpers/format-array.ts","./src/helpers/format-conference-provider.ts","./src/helpers/format-directions-url.ts","./src/helpers/format-feedback-email.ts","./src/helpers/format-ics.ts","./src/helpers/format-slug.ts","./src/helpers/format-string.ts","./src/helpers/format-url.ts","./src/helpers/get-index-by-key.ts","./src/helpers/index.ts","./src/helpers/load-meeting-data.ts","./src/helpers/query-string.ts","./src/helpers/settings.ts","./src/helpers/translate-google-sheet.ts","./src/helpers/user-agent.ts","./src/i18n/en.ts","./src/i18n/es.ts","./src/i18n/fr.ts","./src/i18n/index.ts","./src/i18n/ja.ts","./src/i18n/nl.ts","./src/i18n/pt.ts","./src/i18n/sk.ts","./src/i18n/sv.ts","./src/styles/alert.ts","./src/styles/button.ts","./src/styles/controls.ts","./src/styles/dropdown.ts","./src/styles/global.ts","./src/styles/index.ts","./src/styles/loading.ts","./src/styles/map.ts","./src/styles/meeting.ts","./src/styles/table.ts","./src/styles/variables.ts","./src/types/jsondata.ts","./src/types/meeting.ts","./src/types/metatype.ts","./src/types/settings.ts","./src/types/state.ts","./src/types/translation.ts","./src/types/index.ts"],"version":"5.6.2"}

switch laravel mix to vite #423

switch laravel mix to vite #423

Conversation

joshreisner commented Oct 7, 2024 • edited Loading

netlify bot commented Oct 7, 2024 • edited Loading

✅ Deploy Preview for tsml-ui ready!

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joshreisner commented Oct 12, 2024

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

gkovats left a comment

Choose a reason for hiding this comment

joshreisner commented Oct 13, 2024

joshreisner commented Oct 7, 2024 •

edited

Loading

netlify bot commented Oct 7, 2024 •

edited

Loading