convert DOM creation/manipuation code to concise Solid JSX

.github/workflows/lint.yml

@@ -16,7 +16,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [16.x, 17.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/test.yml

@@ -16,7 +16,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [16.x, 17.x]
         os: ['macos-latest', 'ubuntu-latest', 'windows-latest']
 
     steps:

.gitignore

@@ -8,3 +8,7 @@ themes/
 
 # exceptions
 !.gitkeep
+
+# libraries don't need lock files, only apps do.
+package-lock.json
+yarn.lock

Dockerfile

@@ -3,7 +3,7 @@ WORKDIR /app
 COPY . .
 RUN rm package-lock.json
 RUN npm install
-RUN npx playwright install  
+RUN npx playwright install
 RUN npm run build
 ENTRYPOINT ["npm", "run"]
-CMD ["test"]
+CMD ["test"]

babel.config.js

@@ -1,12 +1,6 @@
 module.exports = {
   presets: [
-    [
-      '@babel/preset-env',
-      {
-        targets: {
-          node: 'current',
-        },
-      },
-    ],
+    ['babel-preset-solid', { generate: 'dom', hydratable: true }],
+    ['@babel/preset-env', { targets: { node: 'current' } }],
   ],
 };

build/build.js

@@ -1,9 +1,9 @@
 const rollup = require('rollup')
-const buble = require('rollup-plugin-buble')
-const commonjs = require('rollup-plugin-commonjs')
-const nodeResolve = require('rollup-plugin-node-resolve')
-const { uglify } = require('rollup-plugin-uglify')
-const replace = require('rollup-plugin-replace')
+const babel = require('@rollup/plugin-babel').default
+const commonjs = require('@rollup/plugin-commonjs')
+const nodeResolve = require('@rollup/plugin-node-resolve').default
+const { terser: uglify } = require('rollup-plugin-terser')
+const replace = require('@rollup/plugin-replace')
 const isProd = process.env.NODE_ENV === 'production'
 const version = process.env.VERSION || require('../package.json').version
 const chokidar = require('chokidar')
@@ -22,10 +22,10 @@ async function build(opts) {
     .rollup({
       input: opts.input,
       plugins: (opts.plugins || []).concat([
-        buble({
-          transforms: {
-            dangerousForOf: true
-          }}),
+        babel({
+          babelHelpers: "bundled",
+          presets: ['babel-preset-solid']
+        }),
         commonjs(),
         nodeResolve(),
         replace({
@@ -49,10 +49,12 @@ async function build(opts) {
 
       console.log(dest)
       return bundle.write({
-        format: 'iife',
-        output: opts.globalName ? {name: opts.globalName} : {},
-        file: dest,
-        strict: false
+        output: {
+          format: 'iife',
+          name: opts.globalName, 
+          file: dest,
+          strict: false
+        },
       })
     })
 }

build/ssr.js

@@ -1,22 +1,19 @@
 var rollup = require('rollup')
-var buble = require('rollup-plugin-buble')
-var async = require('rollup-plugin-async')
-var replace = require('rollup-plugin-replace')
+var babel = require('@rollup/plugin-babel').default
+var replace = require('@rollup/plugin-replace')
 
 rollup
   .rollup({
     input: 'packages/docsify-server-renderer/index.js',
     plugins: [
-      async(),
       replace({
         __VERSION__: process.env.VERSION || require('../package.json').version,
         'process.env.SSR': true
       }),
-      buble({
-        transforms: {
-          generator: false
-        }
-      })
+      babel({
+        babelHelpers: "bundled",
+        presets: ['babel-preset-solid']
+      }),
     ],
     onwarn: function () {}
   })

docs/index.html

@@ -118,7 +118,7 @@
             '/zh-cn/': '搜索',
             '/': 'Search',
           },
-          pathNamespaces: ['/es', '/de-de', '/ru-ru', '/zh-cn']
+          pathNamespaces: ['/es', '/de-de', '/ru-ru', '/zh-cn'],
         },
         vueComponents: {
           'button-counter': {
@@ -208,6 +208,31 @@
                 );
               });
           },
+
+          /**
+           * Docsify tests rely on this plugin.
+           *
+           * This plugin increments a `data-render-count="N"` attribute on the
+           * `<body>` element after each markdown page render. F.e.
+           * `data-render-count="1"`, `data-render-count="2"`, etc.
+           *
+           * The very first render from calling docsifyInit() will result in a
+           * value of 1. Each following render (f.e. from clicking a link) will
+           * increment once rendering of the new page is finished.
+           *
+           * We do this so that we can easily wait for a render to finish before
+           * testing the state of the render result, or else we'll have flaky
+           * tests (a "race condition").
+           */
+          function RenderCountPlugin(hook) {
+            hook.init(() => {
+              document.body.dataset.renderCount = 0;
+            });
+
+            hook.doneEach(() => {
+              document.body.dataset.renderCount++;
+            });
+          },
         ],
       };
     </script>

index.html

@@ -82,7 +82,7 @@
             '/zh-cn/': '搜索',
             '/': 'Search',
           },
-          pathNamespaces: ['/es', '/de-de', '/ru-ru', '/zh-cn']
+          pathNamespaces: ['/es', '/de-de', '/ru-ru', '/zh-cn'],
         },
         plugins: [
           DocsifyCarbon.create('CEBI6KQE', 'docsifyjsorg'),
@@ -110,6 +110,31 @@
               );
             });
           },
+
+          /**
+           * Docsify tests rely on this plugin.
+           *
+           * This plugin increments a `data-render-count="N"` attribute on the
+           * `<body>` element after each markdown page render. F.e.
+           * `data-render-count="1"`, `data-render-count="2"`, etc.
+           *
+           * The very first render from calling docsifyInit() will result in a
+           * value of 1. Each following render (f.e. from clicking a link) will
+           * increment once rendering of the new page is finished.
+           *
+           * We do this so that we can easily wait for a render to finish before
+           * testing the state of the render result, or else we'll have flaky
+           * tests (a "race condition").
+           */
+          function RenderCountPlugin(hook) {
+            hook.init(() => {
+              document.body.dataset.renderCount = 0;
+            });
+
+            hook.doneEach(() => {
+              document.body.dataset.renderCount++;
+            });
+          },
         ],
       };
     </script>

jest.config.js

@@ -20,6 +20,7 @@ module.exports = {
     // Unit Tests (Jest)
     {
       ...sharedConfig,
+      preset: 'solid-jest/preset/browser',
       displayName: 'unit',
       setupFilesAfterEnv: ['<rootDir>/test/config/jest.setup-tests.js'],
       testMatch: ['<rootDir>/test/unit/*.test.js'],
@@ -28,6 +29,7 @@ module.exports = {
     // Integration Tests (Jest)
     {
       ...sharedConfig,
+      preset: 'solid-jest/preset/browser',
       displayName: 'integration',
       setupFilesAfterEnv: ['<rootDir>/test/config/jest.setup-tests.js'],
       testMatch: ['<rootDir>/test/integration/*.test.js'],