feat: publish examples to GitHub-backed StackBlitz branches

.github/workflows/publish-examples.yml

@@ -0,0 +1,59 @@
+name: Publish Examples
+
+# Each apps/<example>/<flavor> is extracted into a standalone project and pushed
+# to the <example>-<flavor> branch, which StackBlitz opens directly from GitHub:
+#   https://stackblitz.com/github/NativeScript/stackblitz-examples/tree/<example>-<flavor>
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    strategy:
+      fail-fast: false
+      matrix:
+        example: [battery]
+        flavor: [angular, javascript, react, solid, svelte, typescript, vue]
+    env:
+      OUT_DIR: dist/${{ matrix.example }}-${{ matrix.flavor }}
+    steps:
+      - uses: actions/checkout@v7
+
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 22
+
+      - name: Extract
+        run: node tools/scripts/extract-example.mjs ${{ matrix.example }} ${{ matrix.flavor }} "$OUT_DIR"
+
+      - name: Install and bundle for iOS and Android
+        run: tools/scripts/verify-example.sh "$OUT_DIR"
+
+      - name: Publish to ${{ matrix.example }}-${{ matrix.flavor }}
+        if: github.ref == 'refs/heads/main'
+        env:
+          BRANCH: ${{ matrix.example }}-${{ matrix.flavor }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          remote="https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git"
+          if ! git clone --quiet --depth 1 --branch "$BRANCH" "$remote" publish; then
+            git init --quiet --initial-branch "$BRANCH" publish
+          fi
+          find publish -mindepth 1 -maxdepth 1 ! -name .git -exec rm -rf {} +
+          cp -R "$OUT_DIR"/. publish/
+          cd publish
+          git add --all
+          if git diff --cached --quiet; then
+            echo "$BRANCH is already up to date"
+            exit 0
+          fi
+          git -c user.name='github-actions[bot]' \
+              -c user.email='41898282+github-actions[bot]@users.noreply.github.com' \
+              commit --quiet -m "chore(update): $BRANCH to $GITHUB_SHA"
+          git push --quiet "$remote" "HEAD:refs/heads/$BRANCH"

.gitignore

@@ -46,3 +46,6 @@ package-lock.json
 # System Files
 .DS_Store
 Thumbs.db
+
+.nx/cache
+.nx/workspace-data

.prettierignore

@@ -2,3 +2,6 @@
 
 /dist
 /coverage
+
+/.nx/cache
+/.nx/workspace-data

README.md

@@ -1,36 +1,59 @@
 # StackBlitz Examples
 
-The examples are managed on the `main` branch only - the individual flavor branches are automatically updated when pushing to `main`
-
-Each example is split into it's own folder within apps, for example:
+Examples are edited on `main` only. Each one lives in its own folder:
 
 ```
 apps/{example}/{flavor}
 ```
 
-Each example can utilize shared `libs` for their examples to reuse across flavors, for example:
+Code shared across the flavors of an example lives in `libs`, e.g. `libs/nativescript-battery` is used by every `apps/battery/*` flavor. Apps import it by package name (`@stackblitz/nativescript-battery`), which each app's `webpack.config.js` aliases to the lib's `src` folder.
 
-```
-libs/nativescript-battery
-```
+## How examples reach StackBlitz
+
+Every push to `main` runs [`publish-examples.yml`](.github/workflows/publish-examples.yml), which for each `{example}/{flavor}`:
+
+1. extracts it into a standalone project ([`tools/scripts/extract-example.mjs`](tools/scripts/extract-example.mjs)), copying in the libs it uses and rewriting `../../../` paths;
+2. installs it and bundles it for iOS and Android ([`tools/scripts/verify-example.sh`](tools/scripts/verify-example.sh)), the same build `ns preview` runs;
+3. pushes it to the `{example}-{flavor}` branch.
+
+Pull requests run steps 1 and 2 without publishing.
 
-^ is used across all `apps/battery` examples.
+> **Warning:** Do not edit the `{example}-{flavor}` branches; they are overwritten on every publish.
 
-## Test them out locally
+### Saved projects linked from nativescript.org
 
-Since each flavor utilizes it's own node_modules dependencies you want to clean each example before running it, for example:
+nativescript.org links to saved StackBlitz projects owned by `nativescript-oss` (`stackblitz.com/edit/nativescript-battery-example-*`), because their view and fork counts are shown to visitors. The published branches are the source for those projects: after a change lands on `main`, sign in as `nativescript-oss`, open the saved project, replace its files with the contents of the matching `{example}-{flavor}` branch, and save.
+
+### Branch links (always current, no view counts)
+
+StackBlitz can also open each branch straight from GitHub. Use these to check what is on `main`, or as a fallback link if a saved project breaks:
 
 ```
-npx nx run battery-angular:clean
+https://stackblitz.com/github/NativeScript/stackblitz-examples/tree/{example}-{flavor}?file={path}
 ```
 
-You can now try out the example:
+| Flavor     | Link |
+| ---------- | ---- |
+| TypeScript | https://stackblitz.com/github/NativeScript/stackblitz-examples/tree/battery-typescript?file=app%2Fmain-page.xml |
+| JavaScript | https://stackblitz.com/github/NativeScript/stackblitz-examples/tree/battery-javascript?file=app%2Fmain-page.xml |
+| Angular    | https://stackblitz.com/github/NativeScript/stackblitz-examples/tree/battery-angular?file=src%2Fapp%2Fhome.component.html |
+| React      | https://stackblitz.com/github/NativeScript/stackblitz-examples/tree/battery-react?file=src%2Fcomponents%2FHomeScreen.tsx |
+| Solid      | https://stackblitz.com/github/NativeScript/stackblitz-examples/tree/battery-solid?file=src%2Fcomponents%2Fhome.jsx |
+| Svelte     | https://stackblitz.com/github/NativeScript/stackblitz-examples/tree/battery-svelte?file=app%2Fcomponents%2FHome.svelte |
+| Vue        | https://stackblitz.com/github/NativeScript/stackblitz-examples/tree/battery-vue?file=src%2Fcomponents%2FHome.vue |
+
+## Check an example locally
+
+Run what CI runs:
 
 ```
-npx nx run battery-angular:ios
+node tools/scripts/extract-example.mjs battery vue dist/battery-vue
+tools/scripts/verify-example.sh dist/battery-vue
 ```
 
-> **Warning:** Do not edit the individual flavor branches manually!.
+`dist/battery-vue` is then the exact project StackBlitz will load.
+
+`@nativescript/core` stays on 8.9.x until NativeScript Preview supports v9.
 
 # Templates
 

apps/battery/angular/package.json

@@ -4,29 +4,29 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@angular/animations": "~14.1.0",
-    "@angular/common": "~14.1.0",
-    "@angular/compiler": "~14.1.0",
-    "@angular/core": "~14.1.0",
-    "@angular/forms": "~14.1.0",
-    "@angular/platform-browser": "~14.1.0",
-    "@angular/platform-browser-dynamic": "~14.1.0",
-    "@angular/router": "~14.1.0",
-    "@nativescript/angular": "^14.0.0",
-    "@nativescript/core": "~8.3.0",
-    "@nativescript/theme": "~3.0.2",
-    "rxjs": "~7.5.0",
-    "zone.js": "~0.11.5"
+    "@angular/animations": "~20.0.0",
+    "@angular/common": "~20.0.0",
+    "@angular/compiler": "~20.0.0",
+    "@angular/core": "~20.0.0",
+    "@angular/forms": "~20.0.0",
+    "@angular/platform-browser": "~20.0.0",
+    "@angular/platform-browser-dynamic": "~20.0.0",
+    "@angular/router": "~20.0.0",
+    "@nativescript/angular": "~20.0.0",
+    "@nativescript/core": "~8.9.0",
+    "rxjs": "~7.8.0",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~14.1.0",
-    "@angular/compiler-cli": "~14.1.0",
-    "@nativescript/ios": "8.3.3",
-    "@nativescript/preview-cli": "1.0.0-beta.18",
-    "@nativescript/stackblitz": "0.0.5",
-    "@nativescript/types-minimal": "~8.3.0",
-    "@nativescript/webpack": "~5.0.0",
-    "@ngtools/webpack": "~14.1.0",
-    "typescript": "~4.7.0"
+    "@angular-devkit/build-angular": "~20.0.0",
+    "@angular/compiler-cli": "~20.0.0",
+    "@nativescript/preview-cli": "^1.0.14",
+    "@nativescript/stackblitz": "^0.0.8",
+    "@nativescript/tailwind": "^2.1.0",
+    "@nativescript/types": "~8.9.0",
+    "@nativescript/webpack": "~5.0.27",
+    "@ngtools/webpack": "~20.0.0",
+    "tailwindcss": "~3.4.0",
+    "typescript": "~5.8.0"
   }
 }

apps/battery/angular/project.json

@@ -3,48 +3,41 @@
   "sourceRoot": "apps/battery/angular/src",
   "projectType": "application",
   "targets": {
-    "ios": {
+    "build": {
       "executor": "@nativescript/nx:build",
       "options": {
-        "platform": "ios"
+        "noHmr": true,
+        "production": true,
+        "uglify": true,
+        "release": true,
+        "forDevice": true
       },
-      "configurations": {
-        "build": {
-          "copyTo": "./dist/build.ipa"
-        },
-        "prod": {
-          "combineWithConfig": "build:prod"
-        }
-      }
+      "configurations": {}
     },
-    "android": {
-      "executor": "@nativescript/nx:build",
+    "debug": {
+      "executor": "@nativescript/nx:debug",
       "options": {
-        "platform": "android"
+        "noHmr": true,
+        "uglify": false,
+        "release": false,
+        "forDevice": false,
+        "prepare": false
       },
-      "configurations": {
-        "build": {
-          "copyTo": "./dist/build.apk"
-        },
-        "prod": {
-          "combineWithConfig": "build:prod"
-        }
-      }
+      "configurations": {}
     },
     "clean": {
-      "executor": "@nativescript/nx:build",
-      "options": {
-        "clean": true
-      }
+      "executor": "@nativescript/nx:clean",
+      "options": {}
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "lintFilePatterns": [
           "apps/battery/angular/**/*.ts",
           "apps/battery/angular/src/**/*.html"
         ]
       }
     }
-  }
+  },
+  "name": "angular"
 }

apps/battery/angular/references.d.ts

@@ -1 +1 @@
-/// <reference path="./node_modules/@nativescript/types-minimal/index.d.ts" />
+/// <reference path="./node_modules/@nativescript/types/index.d.ts" />

apps/battery/angular/src/app.css

@@ -1,5 +1,11 @@
-@import '@nativescript/theme/css/core.css';
-@import '@nativescript/theme/css/default.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+ActionBar {
+  background-color: #65adf1;
+  color: white;
+}
 
 Button.action-btn {
   border-radius: 25;

apps/battery/angular/src/app/app.component.ts

@@ -1,7 +1,10 @@
-import { Component } from '@angular/core'
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { PageRouterOutlet } from '@nativescript/angular';
 
 @Component({
   selector: 'ns-app',
   templateUrl: './app.component.html',
+  imports: [PageRouterOutlet],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class AppComponent {}

apps/battery/angular/src/app/app.routes.ts

@@ -0,0 +1,7 @@
+import { Routes } from '@angular/router';
+import { HomeComponent } from './home.component';
+
+export const routes: Routes = [
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'home', component: HomeComponent },
+];