@bleedingdev/modern-js-sandpack-react 3.2.0-ultramodern.98 → 3.4.0-ultramodern.0

package/scripts/mwa-template/.gitignore.handlebars

@@ -0,0 +1,30 @@
+.DS_Store
+
+.pnp
+.pnp.js
+.env.local
+.env.*.local
+.history
+*.log*
+
+node_modules/
+.yarn-integrity
+.pnpm-store/
+*.tsbuildinfo
+.changeset/pre.json
+
+dist/
+coverage/
+release/
+output/
+output_resource/
+log/
+
+.vscode/**/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea/
+
+**/*/typings/auto-generated
+
+modern.config.local.*

package/scripts/mwa-template/.nvmrc

@@ -0,0 +1,2 @@
+lts/jod
+

package/scripts/mwa-template/README.md

@@ -0,0 +1,32 @@
+# Modern.js App
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the start server:
+
+```bash
+pnpm start
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm serve
+```
+
+For more information, see the [Modern.js documentation](https://modernjs.dev/en).
+

package/scripts/mwa-template/biome.json.handlebars

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": true,
+    "defaultBranch": "main",
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "arrowParentheses": "asNeeded",
+      "jsxQuoteStyle": "double",
+      "lineWidth": 80
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noDuplicateFontNames": "off"
+      }
+    }
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "files": {
+    "ignoreUnknown": true,
+    "ignore": [".vscode/**/*", "node_modules/**/*", "dist/**/*"]
+  }
+}

package/scripts/mwa-template/package.json.handlebars

@@ -0,0 +1,27 @@
+{
+  "name": "{{packageName}}",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "modern dev",
+    "build": "modern build",
+    "serve": "modern serve"{{#unless isSubproject}},
+    "lint": "biome check"{{/unless}}
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "@modern-js/runtime": "{{version}}",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "{{version}}",
+    "@modern-js/tsconfig": "{{version}}"{{#unless isSubproject}},
+    "@biomejs/biome": "1.9.4"{{/unless}},
+    "typescript": "~5.7.3",
+    "@types/node": "^20",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6"
+  }
+}

package/scripts/template.mts

@@ -1,5 +1,4 @@
-import { renderString } from '@modern-js/codesmith-api-handlebars';
-import { fs } from '@modern-js/codesmith-utils/fs-extra';
+import fs from 'node:fs';
 import { createRequire } from 'module';
 import path from 'path';
 import recursive from 'recursive-readdir';
@@ -14,6 +13,80 @@ const IgnoreFiles = [
   'README.md',
 ];
 
+function renderTemplate(
+  template: string,
+  data: Record<string, unknown>,
+): string {
+  type ConditionalKind = 'if' | 'unless';
+  const tagRegex = /\{\{(~?)(#if|#unless|\/if|\/unless)(?:\s+(\w+))?(~?)\}\}/g;
+
+  function renderConditionals(
+    startIndex: number,
+    expectedClose?: ConditionalKind,
+  ): {
+    rendered: string;
+    nextIndex: number;
+  } {
+    let rendered = '';
+    let cursor = startIndex;
+    tagRegex.lastIndex = startIndex;
+
+    while (true) {
+      const match = tagRegex.exec(template);
+      if (!match) {
+        return {
+          rendered: rendered + template.slice(cursor),
+          nextIndex: template.length,
+        };
+      }
+
+      const [raw, , tag, condition, rightTrim] = match;
+      const tagIndex = match.index;
+      rendered += template.slice(cursor, tagIndex);
+      cursor = tagIndex + raw.length;
+
+      if (tag === '#if' || tag === '#unless') {
+        const kind: ConditionalKind = tag === '#if' ? 'if' : 'unless';
+        const innerResult = renderConditionals(cursor, kind);
+        cursor = innerResult.nextIndex;
+        tagRegex.lastIndex = cursor;
+
+        const conditionValue = Boolean(data[condition ?? '']);
+        const shouldInclude = kind === 'if' ? conditionValue : !conditionValue;
+        if (shouldInclude) {
+          rendered += innerResult.rendered;
+        }
+        continue;
+      }
+
+      if (tag === '/if' || tag === '/unless') {
+        const kind: ConditionalKind = tag === '/if' ? 'if' : 'unless';
+        if (expectedClose === kind) {
+          let nextIndex = cursor;
+          if (rightTrim === '~') {
+            const trailingWhitespace = /^\s*/u.exec(template.slice(nextIndex));
+            nextIndex += trailingWhitespace?.[0].length ?? 0;
+          }
+          return {
+            rendered,
+            nextIndex,
+          };
+        }
+        rendered += raw;
+      }
+    }
+  }
+
+  let result = renderConditionals(0).rendered;
+  const varRegex = /\{\{(\w+)\}\}/g;
+  result = result.replace(varRegex, (match, key) => {
+    const value = data[key];
+    return value !== undefined && value !== null ? String(value) : match;
+  });
+
+  return result;
+}
+
 export async function handleTemplate(
   templatePath: string,
   data: Record<string, any> = {},
@@ -35,7 +108,7 @@ export async function handleTemplate(
           `${routerPrefix}${file
             .replace('.handlebars', fileExtra)
             .replace('npmrc', '.npmrc')}`.replace('language', 'ts')
-        ] = `${renderString(fs.readFileSync(filePath, 'utf-8'), data)}`;
+        ] = renderTemplate(fs.readFileSync(filePath, 'utf-8'), data);
       } else {
         files[`${routerPrefix}${file}`] = `${fs.readFileSync(
           filePath,
@@ -56,12 +129,35 @@ async function handleCodesandboxTemplate() {
   return files;
 }
 
+function resolvePackageRoot(entryPath: string, packageName: string): string {
+  let directory = path.dirname(entryPath);
+
+  while (directory !== path.dirname(directory)) {
+    const packageJsonPath = path.join(directory, 'package.json');
+    if (fs.existsSync(packageJsonPath)) {
+      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+      if (packageJson.name === packageName) {
+        return directory;
+      }
+    }
+    directory = path.dirname(directory);
+  }
+
+  throw new Error(`Unable to resolve package root for ${packageName}.`);
+}
+
 async function handleCreateTemplate() {
   const createPackageMainPath = require.resolve('@modern-js/create');
-  const createPackagePath = path.dirname(path.dirname(createPackageMainPath));
+  const createPackagePath = resolvePackageRoot(
+    createPackageMainPath,
+    '@modern-js/create',
+  );
   const createPackageJsonPath = path.join(createPackagePath, 'package.json');
 
-  const templateDir = path.join(createPackagePath, 'template');
+  // Vendored copy of the upstream single-app MWA template (the old
+  // @modern-js/create `template/` directory). The workspace-shell template
+  // cannot run inside a browser Sandpack/Nodebox environment.
+  const templateDir = path.join(import.meta.dirname, 'mwa-template');
 
   const createPackageJson = JSON.parse(
     fs.readFileSync(createPackageJsonPath, 'utf-8'),