Feature/generate examples

.github/workflows/checks.yml

@@ -26,8 +26,6 @@ jobs:
         run: npm run lint
 
   test:
-    if: |
-      !startsWith(github.event.head_commit.message, 'chore: release v')
     name: Test
     needs: lint
     runs-on: ubuntu-latest
@@ -43,8 +41,6 @@ jobs:
         run: npm run test:ci
 
   build:
-    if: |
-      !startsWith(github.event.head_commit.message, 'chore: release v')
     name: Build
     needs: [lint, test]
     runs-on: ubuntu-latest
@@ -60,8 +56,7 @@ jobs:
         run: npm run build
 
   release:
-    if: |
-      !startsWith(github.event.head_commit.message, 'chore: release v') && github.ref == 'refs/heads/main'
+    if: github.ref == 'refs/heads/main'
     name: Release
     needs: build
     runs-on: ubuntu-latest

.github/workflows/publish.yml

@@ -19,9 +19,9 @@ on:
 
 jobs:
   build:
-    name: Build
     if: |
       github.event_name == 'push' || (github.event_name == 'workflow_dispatch' && (${{ inputs.publish }} || ${{ inputs.deploy }}))
+    name: Build
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -40,9 +40,9 @@ jobs:
           path: dist
 
   publish:
-    name: Publish
     if: |
       github.event_name == 'push' || (github.event_name == 'workflow_dispatch' && ${{ inputs.publish }})
+    name: Publish
     needs: build
     permissions: write-all
     runs-on: ubuntu-latest
@@ -69,11 +69,35 @@ jobs:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
           NODE_AUTH_TOKEN: ${{secrets.WCP_NPM_TOKEN}}
 
-  deploy:
-    name: Deploy
+  docs:
     if: |
       github.event_name == 'push' || (github.event_name == 'workflow_dispatch' && ${{ inputs.deploy }})
+    name: Docs
     needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          cache: "npm"
+          node-version: 18.14.2
+      - uses: actions/download-artifact@v3
+        with:
+          name: latest
+          path: dist
+      - name: Install dependencies
+        run: npm ci
+      - name: Generate docs with examples
+        run: npm run docs
+      - uses: actions/upload-artifact@v3
+        if: success()
+        with:
+          name: latest
+          path: dist
+
+  deploy:
+    name: Deploy
+    needs: docs
     permissions:
       contents: read
       pages: write

package.json

@@ -23,14 +23,15 @@
     "generate:barrels": "barrelsby --config .barrelsby.json",
     "docs:schema": "cross-env NODE_OPTIONS='--loader ts-node/esm' cem analyze --config custom-elements-manifest.config.ts",
     "docs:readme": "wca analyze src --format markdown --outFiles '{dir}/README.md'",
+    "docs:examples": "ts-node ./scripts/prepare-examples.ts --target dist/examples",
     "docs": "run-p --print-name docs:*",
     "test": "jest",
     "test:ci": "jest --ci --passWithNoTests --reporters=default --reporters=jest-junit",
     "test:watch": "jest --watch",
     "prebuild": "npm run clean",
     "build:components": "ts-node esbuild.config.ts",
     "build:types": "tsc --project tsconfig.types.json",
-    "build": "run-p --print-name generate:* build:* docs",
+    "build": "run-p --print-name generate:* build:*",
     "predev": "run-p --print-name generate:*",
     "dev:docs": "npm run docs:schema -- --watch",
     "dev:build": "npm run build:components -- --watch --port 8087",
@@ -54,8 +55,8 @@
     "@types/pretty": "2.0.1",
     "@typescript-eslint/eslint-plugin": "5.53.0",
     "@typescript-eslint/parser": "5.53.0",
-    "@webcomponents-preview/cem-plugin-examples": "0.0.4",
-    "@webcomponents-preview/cem-plugin-inline-readme": "0.0.4",
+    "@webcomponents-preview/cem-plugin-examples": "0.0.23",
+    "@webcomponents-preview/cem-plugin-inline-readme": "0.0.23",
     "autoprefixer": "10.4.13",
     "barrelsby": "2.5.1",
     "cross-env": "7.0.3",

scripts/prepare-examples.config.ts

@@ -0,0 +1,7 @@
+#!/usr/bin/env ts-node
+
+import { customElementExamplesPlugin } from '@webcomponents-preview/cem-plugin-examples';
+
+export default {
+  plugins: [customElementExamplesPlugin()],
+};

scripts/prepare-examples.index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<head lang="en">
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <link rel="stylesheet" href="../../styles/global.css" />
+  {{sources}}
+</head>
+
+<body>
+  <wcp-root title="{{title}}" manifest-url="custom-elements.json">
+    <img slot="logo" src="../../assets/icons/logo.svg" height="30px" />
+  </wcp-root>
+  <script type="module" src="../../index.js"></script>
+</body>