Playground Updates (#22)

* Fix playground active code update flow

* Convert playground to JS

* add dynamic code source CodeBlock

* write extraction script

* fixup

* md js extraction script

* add extracted js examples

* prettier ignore examples

* Revert "add extracted js examples"

This reverts commit 563778a8d5eddc30612ee4d181346e8e000b1dc9.

* extract examples to js files

* Revert "extract examples to js files"

This reverts commit 3dc3e2bf285ccc3d5e9662689151e2170f60c0be.

* tweak script

* add extracted files no linting

* Tweak CodeBlock to load js from filesystem

* remove example TS

* don't prettify examples

* remove example js folder fixup

* Never run this script again!

* fixup

* Working example code selector

* Style Select and fix code editor / select change interdependency

* add import to example files

* add examples order in json so can be referenced at runtime and in example generation script

* build examples md from source js files

* fix examples

* fix fullscreen styling

* update useEditorCode hook to account for webworker library

* add usePixiVersions hook and Select on playground

* fixup

* * tweak sandpack configuration for best combination of vanilla template + babel config + open in codesandbox functionality, encapsulate in useSandpackConfiguration hook
* make playground example styling hack a little more reusable/less magic

* fixup with versions

* fixup with usesWebWorker stuff

* fix TS error

* and again

* fix linting

* delete examples md and ignore since they're now autogenerated

* autogenerate examples when starting dev mode

* use URL as single state source of truth for playground selects

* style navigation

---------

Co-authored-by: Alex Prokop <[email protected]>

.eslintrc.js

@@ -21,13 +21,24 @@ module.exports = {
                 api: 'api',
             },
         },
+        react: {
+            version: 'detect',
+        },
     },
     ignorePatterns: ['build', 'node_modules'],
+    overrides: [
+        {
+            files: ['src/data/examples/**/*.js'],
+            rules: {
+                'no-mixed-operators': 'off',
+            },
+        },
+    ],
     rules: {
         'no-empty-function': 0,
         'no-prototype-builtins': 0,
         'react-hooks/rules-of-hooks': 'error',
-        'react-hooks/exhaustive-deps': 'warn',
+        'react-hooks/exhaustive-deps': 'error',
         'spaced-comment': [1, 'always', { markers: ['/'] }],
         '@typescript-eslint/triple-slash-reference': [1, { path: 'always' }],
         '@typescript-eslint/consistent-type-imports': [1, { disallowTypeAnnotations: false }],

.prettierignore

@@ -6,6 +6,7 @@
 *.frag
 *.vert
 /build
+/src/data/examples/**
 
 # TODO: just temporarily ignore these
 /blog

docs/examples/.gitignore

@@ -0,0 +1,3 @@
+# Examples MD are autogenerated from src/data/examples JS files
+*
+!index.md

package.json

@@ -3,6 +3,7 @@
     "version": "0.0.0",
     "private": true,
     "scripts": {
+        "prebuild": "npm run write-example-docs",
         "build": "docusaurus build",
         "clear": "docusaurus clear",
         "deploy": "docusaurus deploy",
@@ -12,11 +13,13 @@
         "prettier:check": "prettier --check .",
         "prettify": "prettier --write .",
         "serve": "docusaurus serve",
+        "prestart": "npm run write-example-docs",
         "start": "cross-env PIXI_VERSION=dev docusaurus start",
         "swizzle": "docusaurus swizzle",
         "types": "tsc --noEmit",
         "write-heading-ids": "docusaurus write-heading-ids",
         "write-translations": "docusaurus write-translations",
+        "write-example-docs": "./scripts/write-example-docs.js",
         "write-versions": "node ./scripts/write-versions.js",
         "prepare": "husky install"
     },
@@ -54,10 +57,12 @@
         "@mdx-js/react": "^1.6.22",
         "@monaco-editor/react": "^4.4.6",
         "@pixi/webdoc-docusaurus-template": "^1.0.0",
+        "classnames": "^2.3.2",
         "clsx": "^1.2.1",
         "docusaurus-plugin-sass": "^0.2.3",
         "pixi.js": "^7.0.4",
         "prism-react-renderer": "^1.3.5",
+        "ramda": "^0.28.0",
         "raw-loader": "^4.0.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -68,6 +73,7 @@
         "@docusaurus/module-type-aliases": "^2.2.0",
         "@pixi/eslint-config": "^4.0.1",
         "@tsconfig/docusaurus": "^1.0.6",
+        "@types/ramda": "^0.28.23",
         "compare-versions": "^6.0.0-rc.1",
         "cross-env": "^7.0.3",
         "dotenv": "^16.0.3",

pixi-versions.json

@@ -1,44 +1,60 @@
 [
   {
+    "versionLabel": "dev",
     "version": "dev",
     "releaseNotes": "https://github.com/pixijs/pixijs/releases",
     "build": "https://pixijs.download/dev/pixi.min.js",
-    "docs": "/api"
+    "docs": "/api",
+    "dev": true,
+    "npm": "https://pkg.csb.dev/pixijs/pixijs/commit/0b3e44c5"
   },
   {
-    "version": "7.2.x",
-    "releaseNotes": "https://github.com/pixijs/pixijs/releases/tags/v7.2.1",
-    "build": "https://pixijs.download/v7.2.1/pixi.min.js",
-    "docs": "https://pixijs.download/v7.2.1/docs/index.html"
+    "versionLabel": "v7.2.x",
+    "version": "7.2.2",
+    "releaseNotes": "https://github.com/pixijs/pixijs/releases/tags/v7.2.2",
+    "build": "https://pixijs.download/v7.2.2/pixi.min.js",
+    "docs": "https://pixijs.download/v7.2.2/docs/index.html",
+    "npm": "7.2.2",
+    "latest": true
   },
   {
-    "version": "7.1.x",
+    "versionLabel": "v7.1.x",
+    "version": "7.1.4",
     "releaseNotes": "https://github.com/pixijs/pixijs/releases/tags/v7.1.4",
     "build": "https://pixijs.download/v7.1.4/pixi.min.js",
-    "docs": "https://pixijs.download/v7.1.4/docs/index.html"
+    "docs": "https://pixijs.download/v7.1.4/docs/index.html",
+    "npm": "7.1.4"
   },
   {
-    "version": "7.0.x",
+    "versionLabel": "v7.0.x",
+    "version": "7.0.5",
     "releaseNotes": "https://github.com/pixijs/pixijs/releases/tags/v7.0.5",
     "build": "https://pixijs.download/v7.0.5/pixi.min.js",
-    "docs": "https://pixijs.download/v7.0.5/docs/index.html"
+    "docs": "https://pixijs.download/v7.0.5/docs/index.html",
+    "npm": "7.0.5"
   },
   {
-    "version": "6.x",
+    "versionLabel": "v6.x",
+    "version": "6.5.9",
     "releaseNotes": "https://github.com/pixijs/pixijs/releases/tags/v6.5.9",
     "build": "https://pixijs.download/v6.5.9/pixi.min.js",
-    "docs": "https://pixijs.download/v6.5.9/docs/index.html"
+    "docs": "https://pixijs.download/v6.5.9/docs/index.html",
+    "npm": "6.5.9"
   },
   {
-    "version": "5.x",
+    "versionLabel": "v5.x",
+    "version": "5.3.12",
     "releaseNotes": "https://github.com/pixijs/pixijs/releases/tags/v5.3.12",
     "build": "https://pixijs.download/v5.3.12/pixi.min.js",
-    "docs": "https://pixijs.download/v5.3.12/docs/index.html"
+    "docs": "https://pixijs.download/v5.3.12/docs/index.html",
+    "npm": "5.3.12"
   },
   {
-    "version": "4.x",
+    "versionLabel": "v4.x",
+    "version": "4.8.9",
     "releaseNotes": "https://github.com/pixijs/pixijs/releases/tags/v4.8.9",
     "build": "https://pixijs.download/v4.8.9/pixi.min.js",
-    "docs": "https://pixijs.download/v4.8.9/docs/index.html"
+    "docs": "https://pixijs.download/v4.8.9/docs/index.html",
+    "npm": "4.8.9"
   }
 ]