build:standalone

.github/workflows/release.yml

@@ -1,74 +1,95 @@
 name: Release
 
 on:
-  push:
-    tags:
-      - "v*"
-  workflow_dispatch:
+    push:
+        tags:
+            - 'v*'
+    workflow_dispatch:
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-
-      - name: Install dependencies
-        run: npm i
-
-      - name: Build
-        run: npm run build
-
-      - name: Create zip
-        run: npm run plugin-zip
-
-      - name: Archive production artifact
-        uses: actions/upload-artifact@v2
-        with:
-          name: plugin_zip
-          path: wp-block-nonogram.zip
-
-  release:
-    needs: build
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: get tag name
-        run: echo "TAG_NAME=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
-
-      - name: Create release
-        id: create_release
-        uses: actions/create-release@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          tag_name: ${{ github.ref }}
-          release_name: Release ${{ github.ref }}
-          body: |
-            This is the release for tag ${{ env.TAG_NAME }}.
-          draft: false
-          prerelease: false
-
-      - name: Download production artifact
-        uses: actions/download-artifact@v2
-        with:
-          name: plugin_zip
-
-      - name: Upload release artifact
-        uses: actions/upload-release-asset@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          upload_url: ${{ steps.create_release.outputs.upload_url }}
-          asset_path: wp-block-nonogram.zip
-          asset_name: wp-block-nonogram.zip
-          asset_content_type: application/zip
+    build:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Set up Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: '20'
+
+            - name: Install dependencies
+              run: npm i
+
+            - name: Build
+              run: npm run build
+
+            - name: Archive standalone artifact
+              uses: actions/upload-artifact@v2
+              with:
+                  name: standalone_js
+                  path: standalone/view.js
+
+            - name: Create zip
+              run: npm run plugin-zip
+
+            - name: Archive plugin artifact
+              uses: actions/upload-artifact@v2
+              with:
+                  name: plugin_zip
+                  path: wp-block-nonogram.zip
+
+    release:
+        needs: build
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: get tag name
+              run: echo "TAG_NAME=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
+
+            - name: Create release
+              id: create_release
+              uses: actions/create-release@v1
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              with:
+                  tag_name: ${{ github.ref }}
+                  release_name: Release ${{ github.ref }}
+                  body: |
+                      This is the release for tag ${{ env.TAG_NAME }}.
+                  draft: false
+                  prerelease: false
+
+            - name: Download standalone artifact
+              uses: actions/download-artifact@v2
+              with:
+                  name: standalone_js
+
+            - name: Upload standalone artifact
+              uses: actions/upload-release-asset@v1
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              with:
+                  upload_url: ${{ steps.create_release.outputs.upload_url }}
+                  asset_path: standalone/view.js
+                  asset_name: nonogram.js
+                  asset_content_type: text/javascript
+
+            - name: Download plugin artifact
+              uses: actions/download-artifact@v2
+              with:
+                  name: plugin_zip
+
+            - name: Upload plugin artifact
+              uses: actions/upload-release-asset@v1
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              with:
+                  upload_url: ${{ steps.create_release.outputs.upload_url }}
+                  asset_path: wp-block-nonogram.zip
+                  asset_name: wp-block-nonogram.zip
+                  asset_content_type: application/zip

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 
 build/
+standalone/
 
 # Logs
 logs

package.json

@@ -6,10 +6,15 @@
 	"author": "Mitsui <todays.mitsui@gmail.com>",
 	"license": "MIT",
 	"main": "build/index.js",
-	"files": [ "nonogram.php", "build/*" ],
+	"files": [
+		"nonogram.php",
+		"build/*"
+	],
 	"scripts": {
 		"start": "run-p start:wp-env start:wp-scripts",
-		"build": "wp-scripts build",
+		"build": "run-s build:plugin build:standalone",
+		"build:plugin": "wp-scripts build",
+		"build:standalone": "wp-scripts build src/view.js --output-path=standalone",
 		"fmt": "wp-scripts format",
 		"format": "wp-scripts format",
 		"lint:css": "wp-scripts lint-style",

src/view.js

@@ -7,8 +7,10 @@ import { createRoot } from 'react-dom/client';
  */
 function init( container ) {
 	const aspectRatio = container.dataset.aspectRatio
-		.split( ':' )
-		.map( ( str ) => parseInt( str, 10 ) );
+		? container.dataset.aspectRatio
+				.split( ':' )
+				.map( ( str ) => parseInt( str, 10 ) )
+		: [ 1, 1 ];
 	const rowClues = decodeClues( container.dataset.rowClues );
 	const columnClues = decodeClues( container.dataset.columnClues );