Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite + Content Collections #129

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

markmals
Copy link
Contributor

@markmals markmals commented Nov 4, 2023

This is another draft PR with Vite support, but this one takes things a bit farther. I took a slightly more greenfield approach to this conversion and replaced the blog set up that is currently in place with one that is more Vite-native.

The Markdown/MDX content set up in this PR works very similarly to Astro's content collections. With the power of Vite's import.meta.glob, we can easily query our file system with a glob pattern at bundle-time for any files Vite understands and then extract content from them as if they were being dynamically imported. This allows us to use Vite's build pipeline to compile our MDX into a React component and all the niceties that come along with that (auto file watching, hot module reloading, etc.). This also means we only need to run the Vite process for dev and build, rather than having helper processes alongside.

This PR also includes a swap of Zod for Valibot, for it's superior bundle size and tree-shakability, since validation will now happen on the client as well.

I'm still struggling to figure out how to make mocks work with ES modules and I haven't spent enough time figuring out how to modify the existing tests to work with this new setup/code yet, but this PR solves almost all of issues with my previous Vite PR:

  • Tests are not updated for the new content collection code
  • Mocks are not being run in dev mode (e.g. "dev:remix": "binode --import ./mocks/index.js -- vite"); when I originally tried this, I got ESM compatibility errors, so I just removed the mocks loader from the dev command
  • tsc complains about import.meta usage, even though the tsconfig.json is configured correctly for Vite, so I had to disable the call to tsc in the validate:precommit script in order to make this commit
  • The types for the sync-directory package are vended incorrectly and TypeScript complains about them; I added @ts-expect-error at each import site to get around this
  • For some reason, Vite is trying to resolve a module from node_modules/@esbuild-plugins/node-resolve/esm/index.js; The error message says to mark it as external, but it's still throwing the error Could not resolve "builtin-modules", even when it's marked as external in build.rollupOptions.external; This error doesn't seem to actually impact any functionality
  • Without using the @vitejs/plugin-react plugin, the React global is used in the JSX transform (e.g. React.createElement) without an import, causing ReferenceError: React is not defined errors
  • Including the official React plugin causes a client-side error during dev (Uncaught SyntaxError: Identifier 'RefreshRuntime' has already been declared) due to multiple versions of the React Refresh (HMR) Runtime being loaded: one by the Remix plugin and one by the React plugin.
  • Building the site for production with the official React plugin and running it with remix-serve causes an error: TypeError: jsxDEV is not a function; Building the site for production without the official React plugin and running it with remix-serve causes a different error: ReferenceError: React is not defined
  • Unicode on the site is not being rendered correctly: the 💿 emoji in the <nav> and <title> is being rendered as 💿 and the © symbol in the <footer> is being rendered as ©

I know this is a big departure from the previous architecture, so I'll leave this as a draft along with my previous Vite PR. When we're ready to move to Vite, let me know which direction we want to go and I'll focus more on that PR (or maybe even put up a third for Strapi support?)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant