Merge pull request #13835 from meteor/meteorvite-update-skeletons

[Contribution] Update meteor-vite skeletons

tools/cli/commands.js

@@ -1203,71 +1203,85 @@ main.registerCommand({
     toIgnore.push(/(\.html|\.js|\.css)/);
   }
 
-  try {
-    // Prototype option should use local skeleton.
-    // Maybe we should use a different skeleton for prototype
-    if (options.prototype) throw new Error("Using prototype option");
-    // if using the release option we should use the default skeleton
-    // using it as it was before 2.x
-    if (release.explicit) throw new Error("Using release option");
+  const copyFromLocalSkeleton = async () => {
+    await files.cp_r(
+      skeletonPath,
+      appPath,
+      {
+        transformFilename: function (f) {
+          return transform(f);
+        },
+        transformContents: function (contents, f) {
+          // check if this app is just for prototyping if it is then we need to add autopublish and insecure in the packages file
+          if (/packages/.test(f)) {
+            const prototypePackages = () =>
+              "autopublish             # Publish all data to the clients (for prototyping)\n" +
+              "insecure                # Allow all DB writes from clients (for prototyping)";
 
-    await setupExampleByURL(`https://github.com/meteor/skel-${skeleton}`);
-  } catch (e) {
+            // XXX: if there is the need to add more options maybe we should have a better abstraction for this if-else
+            if (options.prototype) {
+              return Buffer.from(
+                contents.toString().replace(/~prototype~/g, prototypePackages())
+              );
+            } else {
+              return Buffer.from(contents.toString().replace(/~prototype~/g, ""));
+            }
+          }
+          if (/(\.html|\.[jt]sx?|\.css)/.test(f)) {
+            return Buffer.from(transform(contents.toString()));
+          } else {
+            return contents;
+          }
+        },
+        ignore: toIgnore,
+        preserveSymlinks: true,
+      }
+    );
+  };
 
-    if (
-      e.message !== "Using prototype option" &&
-      e.message !== "Using release option"
-    ) {
-      // something has happened while creating the app using git clone
-      Console.error(
-        `Something has happened while creating your app using git clone.
+  // Check if the local skeleton path exists
+  const skeletonPath = files.pathJoin(
+    __dirnameConverted,
+    "..",
+    "static-assets",
+    `skel-${skeleton}`
+  );
+
+  const useLocalSkeleton = files.exists(skeletonPath) ||
+    options.prototype ||
+    release.explicit;
+  if (useLocalSkeleton) {
+    // Use local skeleton
+    await copyFromLocalSkeleton();
+  } else {
+    try {
+      // Prototype option should use local skeleton.
+      // Maybe we should use a different skeleton for prototype
+      if (options.prototype) throw new Error("Using prototype option");
+      // if using the release option we should use the default skeleton
+      // using it as it was before 2.x
+      if (release.explicit) throw new Error("Using release option");
+
+      // If local skeleton doesn't exist, use setupExampleByURL
+      await setupExampleByURL(`https://github.com/meteor/skel-${skeleton}`);
+    } catch (e) {
+      if (
+        e.message !== "Using prototype option" &&
+        e.message !== "Using release option"
+      ) {
+        // something has happened while creating the app using git clone
+        Console.error(
+          `Something has happened while creating your app using git clone.
          Will use cached version of skeletons.
          Error message: `,
-        e.message
-      );
+          e.message
+        );
+      }
+      // For prototype or release options, use local skeleton
+      await copyFromLocalSkeleton();
     }
-
-       // TODO: decide if this should stay here or not.
-       await files.cp_r(
-        files.pathJoin(
-          __dirnameConverted,
-          "..",
-          "static-assets",
-          `skel-${skeleton}`
-        ),
-        appPath,
-        {
-          transformFilename: function (f) {
-            return transform(f);
-          },
-          transformContents: function (contents, f) {
-            // check if this app is just for prototyping if it is then we need to add autopublish and insecure in the packages file
-            if (/packages/.test(f)) {
-              const prototypePackages = () =>
-                "autopublish             # Publish all data to the clients (for prototyping)\n" +
-                "insecure                # Allow all DB writes from clients (for prototyping)";
-
-              // XXX: if there is the need to add more options maybe we should have a better abstraction for this if-else
-              if (options.prototype) {
-                return Buffer.from(
-                  contents.toString().replace(/~prototype~/g, prototypePackages())
-                );
-              } else {
-                return Buffer.from(contents.toString().replace(/~prototype~/g, ""));
-              }
-            }
-            if (/(\.html|\.[jt]sx?|\.css)/.test(f)) {
-              return Buffer.from(transform(contents.toString()));
-            } else {
-              return contents;
-            }
-          },
-          ignore: toIgnore,
-          preserveSymlinks: true,
-        }
-      );
-      await setupMessages();
   }
+  await setupMessages();
 
   Console.info("");
 });

tools/static-assets/skel-solid/client/entry-meteor.js

@@ -0,0 +1,14 @@
+/**
+ * Entrypoint for the Meteor client
+ *
+ * Generally, this file can be left empty. Vite will add imports for
+ * lazy-loaded Meteor packages to this file to ensure they aren't omitted from
+ * the final production bundle.
+ *
+ * Use ./main.js as the primary entrypoint for your client code to take full
+ * advantage of Vite's plugin and build system.
+ *
+ * This can also be a good place to put code that you don't want Vite to
+ * process, for example, if you run into a compatibility issue or need to use
+ * nested imports which Vite doesn't support.
+ */

tools/static-assets/skel-solid/client/main.js

@@ -0,0 +1 @@
+import '../imports/ui/main';

tools/static-assets/skel-solid/client/main.jsx

@@ -1 +0,0 @@
-// main entry point is in imports/ui/main.jsx

tools/static-assets/skel-solid/imports/ui/main.jsx

@@ -2,6 +2,7 @@
 import { render } from 'solid-js/web';
 import { App } from './App';
 import { Meteor } from "meteor/meteor";
+import './main.css';
 
 Meteor.startup(() => {
   render(() => <App/>, document.getElementById('root'));

tools/static-assets/skel-solid/server/entry-meteor.js

@@ -0,0 +1,12 @@
+/**
+ * Entrypoint for the Meteor server
+ * Generally, this file can be left empty. Vite will add imports for your app's
+ * server bundle here during both development and production build.
+ *
+ * Use ./main.js as the primary entrypoint for your app to take full advantage
+ * of Vite's plugin and build system.
+ *
+ * This can also be a good place to put code that you don't want Vite to
+ * process, for example, if you run into a compatibility issue or need to use
+ * nested imports.
+ */

tools/static-assets/skel-solid/vite.config.mjs

@@ -8,7 +8,7 @@ export default defineConfig({
     solidPlugin(),
     solidSvg({ defaultExport: 'component' }),
     meteor({
-      clientEntry: 'imports/ui/main.jsx',
+      clientEntry: 'client/main.js',
       serverEntry: 'server/main.js',
       enableExperimentalFeatures: true,
       stubValidation: {

tools/static-assets/skel-vue/client/entry-meteor.js

@@ -0,0 +1,14 @@
+/**
+ * Entrypoint for the Meteor client
+ *
+ * Generally, this file can be left empty. Vite will add imports for
+ * lazy-loaded Meteor packages to this file to ensure they aren't omitted from
+ * the final production bundle.
+ *
+ * Use ./main.js as the primary entrypoint for your client code to take full
+ * advantage of Vite's plugin and build system.
+ *
+ * This can also be a good place to put code that you don't want Vite to
+ * process, for example, if you run into a compatibility issue or need to use
+ * nested imports which Vite doesn't support.
+ */

tools/static-assets/skel-vue/client/main.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

tools/static-assets/skel-vue/client/main.js

@@ -1 +1 @@
-// main entry point is in imports/ui/main.jsx
+import '../imports/ui/main'

tools/static-assets/skel-vue/imports/ui/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import AppMenu from './AppMenu.vue'
+import AppMenu from './components/AppMenu.vue'
 </script>
 
 <template>

tools/static-assets/skel-vue/imports/ui/main.css

@@ -0,0 +1 @@
+@import "tailwindcss";

tools/static-assets/skel-vue/imports/ui/main.js

@@ -2,6 +2,7 @@ import { Meteor } from 'meteor/meteor'
 import { createApp } from 'vue'
 import { VueMeteor } from 'vue-meteor-tracker'
 
+import './main.css'
 import App from './App.vue'
 import { router } from './router'
 

tools/static-assets/skel-vue/imports/ui/router.js

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Home from './Home.vue'
-import About from './About.vue'
+import Home from './views/Home.vue'
+import About from './views/About.vue'
 
 export const router = createRouter({
   history: createWebHistory(),

tools/static-assets/skel-vue/imports/ui/views/Home.vue

@@ -1,6 +1,6 @@
 <script setup>
-import Hello from './Hello.vue'
-import Info from './Info.vue'
+import Hello from '../components/Hello.vue'
+import Info from '../components/Info.vue'
 </script>
 
 <template>

tools/static-assets/skel-vue/package.json

@@ -17,6 +17,7 @@
     "vue-router": "^4.2.5"
   },
   "meteor": {
+    "modern": true,
     "mainModule": {
       "client": "client/entry-meteor.js",
       "server": "server/entry-meteor.js"
@@ -25,11 +26,10 @@
   },
   "devDependencies": {
     "@types/meteor": "^2.9.7",
+    "@tailwindcss/vite": "^4.1.11",
     "@vitejs/plugin-vue": "^5.2.1",
-    "autoprefixer": "^10.4.16",
     "meteor-vite": "^3.2.1",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^4.1.11",
     "vite": "^6.0.11"
   }
 }

tools/static-assets/skel-vue/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

tools/static-assets/skel-vue/server/entry-meteor.js

@@ -0,0 +1,12 @@
+/**
+ * Entrypoint for the Meteor server
+ * Generally, this file can be left empty. Vite will add imports for your app's
+ * server bundle here during both development and production build.
+ *
+ * Use ./main.js as the primary entrypoint for your app to take full advantage
+ * of Vite's plugin and build system.
+ *
+ * This can also be a good place to put code that you don't want Vite to
+ * process, for example, if you run into a compatibility issue or need to use
+ * nested imports.
+ */

tools/static-assets/skel-vue/tailwind.config.js

@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./imports/ui/**/*.{vue,js,ts,jsx,tsx}', './client/*.html'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}

tools/static-assets/skel-vue/vite.config.mjs

@@ -1,12 +1,14 @@
-import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
 import { meteor } from 'meteor-vite/plugin';
 
 export default defineConfig({
   plugins: [
     vue(),
+    tailwindcss(),
     meteor({
-      clientEntry: 'imports/ui/main.js',
+      clientEntry: 'client/main.js',
       serverEntry: 'server/main.js',
       enableExperimentalFeatures: true,
       stubValidation: {