Merge pull request #45 from JorgenVatle/merge-with-temp-update

Synchronize with current jorgenvatle:vite-bundler release

.bin/example-app.sh

@@ -0,0 +1,86 @@
+#!/usr/bin/env bash
+
+this="$0"
+action="$1" # e.g. link, build, start
+app="$2" # e.g. vue, svelte
+
+
+APP_DIR="$PWD/examples/$app"
+BUILD_TARGET="$PWD/examples/output/$app"
+NPM_LINK_TARGET="$PWD/npm-packages/meteor-vite"
+export METEOR_PACKAGE_DIRS="$PWD/packages"
+export METEOR_VITE_TSUP_BUILD_WATCHER="true"
+
+
+# Start a development server
+start() {
+  cd "$APP_DIR" || exit 1
+  meteor npm start
+}
+
+# Install dependencies for dev app
+install() {
+  cd "$APP_DIR" || exit 1
+  meteor npm i
+}
+
+# Build an example app for production
+build() {
+    (link) || exit 1
+    (cleanOutput) || exit 1
+
+    ## Disable file watcher for meteor-vite npm package to prevent builds from hanging indefinitely
+    METEOR_VITE_TSUP_BUILD_WATCHER="false"
+
+    cd "$APP_DIR" || exit 1
+    meteor build "$BUILD_TARGET" --directory
+}
+
+# Build then start a production app
+launch() {
+  (build) || exit 1
+  chmod +w -R "$BUILD_TARGET" # Allow writes to the build, very handy for tinkering with the builds
+
+  start:production
+}
+
+# Start an already built production app
+start:production() {
+  (production:install) || exit 1
+
+  local PRODUCTION_SERVER="$this production:app $app"
+  local MONGO_SERVER="$this production:mongo $app"
+
+  concurrently --names "PROD,DEV" --prefixColors "cyan,dim" "$PRODUCTION_SERVER" "$MONGO_SERVER"
+}
+
+cleanOutput() {
+  rm -rf "$BUILD_TARGET"
+}
+
+link() {
+  cd "$APP_DIR" || exit 1
+  meteor npm link "$NPM_LINK_TARGET"
+}
+
+production:install() {
+   cd "$BUILD_TARGET/bundle/programs/server" || exit 1
+   meteor npm install
+}
+
+production:mongo() {
+  start # Just using the meteor dev server for it's reusable mongo server
+}
+
+production:app() {
+  cd "$BUILD_TARGET/bundle" || exit 1;
+
+  export PORT=4040
+  export ROOT_URL=http://localhost:4040
+  export MONGO_URL=mongodb://127.0.0.1:3001/meteor
+
+  meteor node main.js
+}
+
+set -x
+"$action" || exit 1;

.github/workflows/build-example.yml

@@ -22,3 +22,9 @@ jobs:
     uses: ./.github/workflows/_reuse_.build.yml
     with:
       name: svelte
+
+  react:
+    name: React
+    uses: ./.github/workflows/_reuse_.build.yml
+    with:
+      name: react

.github/workflows/lint.yml

@@ -0,0 +1,24 @@
+name: Lint
+on:
+  push:
+  pull_request:
+    branches:
+      - main
+      - release
+
+env:
+  NPM_PACKAGE_PATH: ./npm-packages/meteor-vite
+
+jobs:
+  lint:
+    name: Lint repository
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+      - name: Install root dependencies
+        run: npm ci
+      - name: Lint code
+        run: npm run lint

.github/workflows/test.yml

@@ -24,5 +24,3 @@ jobs:
         run: cd "$NPM_PACKAGE_PATH" && npm test
       - name: Install root dependencies
         run: npm ci
-      - name: Lint code
-        run: npm run lint

.gitignore

@@ -1,7 +1,6 @@
 node_modules/
 output/
 .npm/
-.idea/
 .meteor-vite
 examples/*/vite
 examples/*/.meteor/local

README.md

@@ -19,7 +19,7 @@ Use [Vite](https://vitejs.dev) in your Meteor app! ⚡️
   - [x] [Vue 3](/examples/vue) 
     - [Live demo](https://vite-and-vue3.meteorapp.com/)
   - [x] [Svelte](/examples/svelte)
-  - [ ] React
+  - [x] [React](/examples/react)
 
 ## Installation
 

examples/react/vite.config.js

@@ -1,8 +1,67 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
+/**
+ * @param npmPackages {string[]}
+ * @return {import('vite').Plugin}
+ */
+function useMeteorBundle({
+  npmPackages = [],
+}) {
+  /**
+   * @type {{npmPackage: string, chunkPath: string}[]}
+   */
+  const detectedChunks = []
+  return {
+    name: 'output-gen',
+    enforce: 'pre',
+    resolveId(id, importer, options) {
+      if (!importer)
+        return
+
+      const npmPackage = npmPackages.find(name => importer.includes(`/${name}.js?`))
+      if (!npmPackage)
+        return
+
+      const chunk = {
+        npmPackage,
+        chunkPath: id.replace(/^.\//, ''),
+      }
+
+      detectedChunks.push(chunk)
+      console.log({ id, importer, options, chunk })
+    },
+    transform(code, id) {
+      if (!detectedChunks.length)
+        return
+
+      const chunk = detectedChunks.find(({ chunkPath }) => id.includes(`.vite/deps/${chunkPath}`))
+      if (!chunk)
+        return
+
+      console.log({ transformId: id, chunk })
+      const exportKey = `require_${chunk.npmPackage.replace(/\//g, '_')}`
+      return `
+      var __getOwnPropNames = Object.getOwnPropertyNames;
+      var __commonJS = (cb, mod) => function __require() {
+        return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+      };
+      var ${exportKey} = () => require('${chunk.npmPackage}');
+      export {
+        __commonJS,
+        ${exportKey},
+      }`
+    },
+  }
+}
+
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    useMeteorBundle({
+      npmPackages: ['react'],
+    }),
+  ],
 
   meteor: {
     clientEntry: 'imports/vite-entrypoint.jsx',