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:

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 () {}
   })

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'],