xcratch-create 1.2.0 → 1.4.0

package/bin/create.js

@@ -4,7 +4,8 @@ import path from 'path';
 import { replaceInFile } from 'replace-in-file';
 import fs from 'fs-extra';
 import AdmZip from 'adm-zip';
-import projectJson from '../package.json' assert { type: 'json' };
+
+const projectJson = await fs.readJson(path.resolve(path.dirname(new URL(import.meta.url).pathname), '../package.json'));
 
 const __dirname = path.dirname(new URL(import.meta.url).pathname);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xcratch-create",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Support tool to create new extension for Xcratch",
   "type": "module",
   "bin": {
@@ -29,7 +29,7 @@
   "homepage": "https://github.com/xcratch/xcratch-create#readme",
   "dependencies": {
     "adm-zip": "^0.5.16",
-    "fs-extra": "^11.3.0",
-    "replace-in-file": "^8.3.0"
+    "fs-extra": "^11.3.3",
+    "replace-in-file": "^8.4.0"
   }
 }

package/template/.github/workflows/deploy.yml

@@ -0,0 +1,54 @@
+name: Deploy
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+  workflow_dispatch:
+    inputs:
+      branch:
+        description: "Branch to publish"
+        default: "main"
+        required: true
+      publish-dir:
+        description: "Publish directory"
+        type: string
+        default: "."
+        required: true
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: inputs
+        run: echo "${{ toJSON(inputs) }}"
+      - name: Set branch and publish-dir
+        id: config
+        run: |
+          if [ "${{ github.event_name }}" = "push" ]; then
+            echo "branch=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT
+            echo "publish-dir=." >> $GITHUB_OUTPUT
+          else
+            echo "branch=${{ inputs.branch }}" >> $GITHUB_OUTPUT
+            echo "publish-dir=${{ inputs.publish-dir }}" >> $GITHUB_OUTPUT
+          fi
+      - name: checkout repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ steps.config.outputs.branch }}
+          path: ./repo
+      - name: copy files
+        run: |
+          mkdir -p ./publish
+          cp -r ./repo/dist ./publish/dist
+          cp -r ./repo/projects ./publish/projects
+          cp -r ./repo/README.md ./publish/README.md
+      - name: publish to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./publish
+          destination_dir: ${{ steps.config.outputs.publish-dir }}
+          keep_files: false
+          enable_jekyll: true

package/template/.nvmrc

@@ -0,0 +1 @@
+20.19.4

package/template/README.md

@@ -64,6 +64,66 @@ Run test script to test this extension.
 npm run test
 ```
 
+### Versioning and Deployment
+
+This project uses npm version commands and GitHub Actions for versioning and deployment.
+
+#### Create a New Version
+
+Use npm version command to update the version number. This will automatically:
+1. Update version in `package.json`
+2. Run the build script
+3. Create version-specific build files in `dist/{version}/`
+4. Update `dist/versions.json` with the new version info
+5. Create a git commit and tag
+
+```sh
+# Patch version (1.3.0 → 1.3.1)
+npm version patch
+
+# Minor version (1.3.1 → 1.4.0)
+npm version minor
+
+# Major version (1.4.0 → 2.0.0)
+npm version major
+```
+
+#### Deploy to GitHub Pages
+
+After creating a new version, push the tag to trigger automatic deployment:
+
+```sh
+# Push the version tag
+git push origin v1.4.0
+
+# Or push all tags
+git push --tags
+```
+
+The GitHub Actions workflow will:
+1. Build the extension
+2. Deploy `dist/`, `projects/`, and `README.md` to GitHub Pages
+
+You can also manually trigger deployment from the Actions tab in GitHub.
+
+#### Version Information
+
+All build versions are recorded in `dist/versions.json`:
+
+```json
+{
+  "extensionId": "<<extensionID>>",
+  "latest": "1.0.0",
+  "versions": [
+    {
+      "version": "1.0.0",
+      "buildDate": "2025-10-19T12:34:56.789Z",
+      "module": "1.0.0/<<extensionID>>.mjs"
+    }
+  ]
+}
+```
+
 
 ## 🏠 Home Page
 

package/template/babel.config.json

@@ -14,5 +14,20 @@
       }
     ],
     "@babel/preset-react"
-  ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "targets": {
+              "node": "current"
+            },
+            "modules": "commonjs"
+          }
+        ]
+      ]
+    }
+  }
 }

package/template/package.json

@@ -2,35 +2,38 @@
   "name": "<<repo>>",
   "version": "0.0.0",
   "description": "extension for Xcratch",
+  "extensionId": "<<extensionID>>",
   "scripts": {
     "setup-dev": "node ./scripts/setup-dev.mjs",
     "build": "rollup -c ./scripts/rollup.config.mjs",
     "watch": "rollup -c ./scripts/rollup.config.mjs --watch",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
+    "test": "jest",
+    "version": "node ./scripts/version-build.mjs && git add dist"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.9",
-    "@babel/eslint-parser": "^7.26.8",
-    "@babel/plugin-transform-react-jsx": "^7.25.9",
-    "@babel/plugin-transform-runtime": "^7.26.9",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/register": "^7.25.9",
+    "@babel/core": "^7.28.0",
+    "@babel/eslint-parser": "^7.28.0",
+    "@babel/plugin-transform-react-jsx": "^7.27.1",
+    "@babel/plugin-transform-runtime": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/register": "^7.27.1",
+    "@babel/runtime": "^7.28.2",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-multi-entry": "^6.0.1",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "core-js": "^3.40.0",
-    "eslint": "^8.57.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "babel-jest": "^30.0.5",
+    "core-js": "^3.44.0",
+    "eslint": "^8.57.1",
     "eslint-config-scratch": "^9.0.9",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^27.6.3",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jest": "^29.0.1",
     "fs-extra": "^11.3.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.34.7",
+    "jest": "^30.0.5",
+    "rollup": "^4.46.1",
     "rollup-plugin-polyfill-node": "^0.13.0"
   }
 }

package/template/scripts/.eslintrc.js

@@ -8,7 +8,10 @@ module.exports = {
     es6: true,
     "node": true,
   },
+  parser: "@babel/eslint-parser",
   parserOptions: {
     sourceType: "module",
+    ecmaVersion: 2020,
+    requireConfigFile: false,
   },
 };

package/template/scripts/rollup.config.mjs

@@ -9,6 +9,15 @@ import importImage from '@rollup/plugin-image';
 import multi from '@rollup/plugin-multi-entry';
 import json from '@rollup/plugin-json';
 
+// Read package.json to get extensionId
+const packageJsonPath = path.resolve(process.cwd(), './package.json');
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+const EXTENSION_ID = packageJson.extensionId;
+if (!EXTENSION_ID) {
+    console.error('Error: extensionId not found in package.json');
+    process.exit(1);
+}
+
 // path for block
 const blockSrcDir = path.resolve(process.cwd(), './src/vm/extensions/block');
 const blockFile = path.resolve(blockSrcDir, 'index.js');
@@ -16,13 +25,12 @@ const blockFile = path.resolve(blockSrcDir, 'index.js');
 const entrySrcDir = path.resolve(process.cwd(), './src/gui/lib/libraries/extensions/entry');
 const entryFile = path.resolve(entrySrcDir, 'index.jsx');
 // path for output
-const moduleName = '<<extensionID>>';
 const outputDir = path.resolve(process.cwd(), './dist');
-fs.emptyDirSync(outputDir);
-const moduleFile = path.resolve(outputDir, `${moduleName}.mjs`);
+const moduleFile = path.resolve(outputDir, `${EXTENSION_ID}.mjs`);
 
 const rollupOptions = {
     input: [entryFile, blockFile],
+    context: `window`,
     plugins: [
         multi(),
         importImage(),
@@ -34,10 +42,14 @@ const rollupOptions = {
             modulePaths: [
                 path.resolve(process.cwd(), './node_modules'),
             ],
+            // Add these options to better resolve @babel/runtime
+            include: ['**'],
+            skip: [],
         }),
         json(),
         babel({
             babelrc: false,
+            exclude: ['node_modules/**'],
             presets: [
                 ['@babel/preset-env',
                     {
@@ -55,8 +67,13 @@ const rollupOptions = {
             babelHelpers: 'runtime',
             plugins: [
                 '@babel/plugin-transform-react-jsx',
-                ["@babel/plugin-transform-runtime",
-                    { "regenerator": true }]
+                [
+                    "@babel/plugin-transform-runtime",
+                    { 
+                        "regenerator": true,
+                        "useESModules": true
+                    }
+                ]
             ],
         }),
     ],

package/template/scripts/setup-dev.mjs

@@ -4,14 +4,20 @@
 import path from 'path';
 import fs from 'fs-extra';
 
+// Get scratch-vm path from command line argument
+const args = process.argv.slice(2);
+const vmPath = args[0] || '../scratch-editor/packages/scratch-vm';
+
 // modify for your environment
 const vmSrcDev = path.resolve(process.cwd(), './src/vm');
-const vmSrcOrg = path.resolve(process.cwd(), '../scratch-vm/src');
+const vmSrcOrg = path.resolve(process.cwd(), vmPath, 'src');
 const vmRefs = [
     'extension-support',
     'util',
 ];
 
+console.log(`Using scratch-vm at: ${vmSrcOrg}`);
+
 // Make symbolic link
 const makeSymbolicLink = function (to, from) {
     try {

package/template/scripts/version-build.mjs

@@ -0,0 +1,112 @@
+import path from 'path';
+import fs from 'fs-extra';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const projectRoot = path.resolve(__dirname, '..');
+const packageJsonPath = path.join(projectRoot, 'package.json');
+const distDir = path.join(projectRoot, 'dist');
+
+// Read package.json to get version and extensionId
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+const version = packageJson.version;
+const EXTENSION_ID = packageJson.extensionId;
+if (!EXTENSION_ID) {
+    console.error('Error: extensionId not found in package.json');
+    process.exit(1);
+}
+
+console.log(`Building ${EXTENSION_ID} version ${version}...`);
+
+// Run rollup build
+try {
+    execSync('npm run build', { 
+        cwd: projectRoot,
+        stdio: 'inherit'
+    });
+} catch (error) {
+    console.error('Build failed:', error.message);
+    process.exit(1);
+}
+
+// Create version directory and copy files
+const sourceFile = path.join(distDir, `${EXTENSION_ID}.mjs`);
+const versionDir = path.join(distDir, version);
+const targetFile = path.join(versionDir, `${EXTENSION_ID}.mjs`);
+
+if (fs.existsSync(sourceFile)) {
+    // Create version directory
+    fs.ensureDirSync(versionDir);
+    
+    // Copy the module file
+    fs.copyFileSync(sourceFile, targetFile);
+    console.log(`✓ Created: dist/${version}/${EXTENSION_ID}.mjs`);
+    
+    // Also copy sourcemap if it exists
+    const sourceMapFile = `${sourceFile}.map`;
+    const targetMapFile = `${targetFile}.map`;
+    if (fs.existsSync(sourceMapFile)) {
+        fs.copyFileSync(sourceMapFile, targetMapFile);
+        console.log(`✓ Created: dist/${version}/${EXTENSION_ID}.mjs.map`);
+    }
+    
+    // Update versions.json file
+    const versionJsonPath = path.join(distDir, 'versions.json');
+    let versionData = {
+        extensionId: EXTENSION_ID,
+        versions: []
+    };
+    
+    // Read existing versions.json if it exists
+    if (fs.existsSync(versionJsonPath)) {
+        try {
+            versionData = JSON.parse(fs.readFileSync(versionJsonPath, 'utf-8'));
+            // Ensure versions array exists
+            if (!versionData.versions) {
+                versionData.versions = [];
+            }
+        } catch (error) {
+            console.warn('Warning: Could not parse existing versions.json, creating new one');
+        }
+    }
+    
+    // Remove existing entry for this version if it exists
+    versionData.versions = versionData.versions.filter(v => v.version !== version);
+    
+    // Add new version info
+    const newVersionInfo = {
+        version: version,
+        buildDate: new Date().toISOString(),
+        module: `${version}/${EXTENSION_ID}.mjs`
+    };
+    
+    versionData.versions.push(newVersionInfo);
+    
+    // Sort versions in descending order (newest first)
+    versionData.versions.sort((a, b) => {
+        const versionA = a.version.split('.').map(Number);
+        const versionB = b.version.split('.').map(Number);
+        for (let i = 0; i < Math.max(versionA.length, versionB.length); i++) {
+            const numA = versionA[i] || 0;
+            const numB = versionB[i] || 0;
+            if (numA !== numB) return numB - numA;
+        }
+        return 0;
+    });
+    
+    // Add latest version reference
+    versionData.latest = version;
+    
+    // Write versions.json
+    fs.writeFileSync(versionJsonPath, JSON.stringify(versionData, null, 2), 'utf-8');
+    console.log(`✓ Updated: dist/versions.json`);
+    
+} else {
+    console.error(`Error: ${sourceFile} not found`);
+    process.exit(1);
+}
+
+console.log(`\n✓ Version ${version} build completed successfully!`);

package/template/src/gui/lib/libraries/extensions/entry/index.jsx

@@ -5,6 +5,7 @@
 import iconURL from './entry-icon.png';
 import insetIconURL from './inset-icon.svg';
 import translations from './translations.json';
+import {version as packageVersion} from '../../../../../../package.json';
 
 /**
  * Formatter to translate the messages in this extension.
@@ -14,6 +15,8 @@ import translations from './translations.json';
  */
 let formatMessage = messageData => messageData.defaultMessage;
 
+const version = `v${packageVersion}`;
+
 const entry = {
     get name () {
         return formatMessage({
@@ -28,11 +31,11 @@ const entry = {
     iconURL: iconURL,
     insetIconURL: insetIconURL,
     get description () {
-        return formatMessage({
+        return `${formatMessage({
             defaultMessage: 'an extension for Xcratch',
             description: 'Description for this extension',
             id: '<<extensionID>>.entry.description'
-        });
+        })} (${version})`;
     },
     tags: [],
     featured: true,