@ditojs/server 0.275.0 → 1.0.0

package/src/controllers/AdminController.js

@@ -1,15 +1,19 @@
 import path from 'path'
+import fs from 'fs'
 import Koa from 'koa'
-import mount from 'koa-mount'
 import serve from 'koa-static'
-import koaWebpack from 'koa-webpack'
-import historyApiFallback from 'koa-connect-history-api-fallback'
-import VueService from '@vue/cli-service'
-import HtmlWebpackTagsPlugin from 'html-webpack-tags-plugin'
-import { Controller } from './Controller'
-import { ControllerError } from '@/errors'
-import { formatJson } from '@/utils'
-import { isString, isObject } from '@ditojs/utils'
+import { defineConfig, createServer } from 'vite'
+import { createVuePlugin } from 'vite-plugin-vue2'
+import {
+  viteCommonjs as createCommonJsPlugin
+} from '@originjs/vite-plugin-commonjs'
+import picomatch from 'picomatch'
+import { findUpSync } from 'find-up'
+import { merge } from '@ditojs/utils'
+import { Controller } from './Controller.js'
+import { handleConnectMiddleware } from '../middleware/index.js'
+import { ControllerError } from '../errors/index.js'
+import { formatJson } from '../utils/index.js'
 
 export class AdminController extends Controller {
   // @override
@@ -67,7 +71,7 @@ export class AdminController extends Controller {
     // Shield admin views against unauthorized access.
     const authorization = this.processAuthorize(this.authorize)
     return async (ctx, next) => {
-      if (/^\/dito\b/.test(ctx.url)) {
+      if (ctx.url === '/dito.js') {
         // Return without calling `next()`
         return this.sendDitoObject(ctx)
       } else if (/\/views\b/.test(ctx.url)) {
@@ -83,178 +87,197 @@ export class AdminController extends Controller {
     if (this.mode === 'development') {
       // Calling getPath() throws exception if admin.build.path is not defined:
       if (this.getPath('build')) {
-        this.app.once('after:start', () => this.setupKoaWebpack())
+        this.app.once('after:start', () => this.setupViteServer())
       }
     } else {
       // Statically serve the pre-built admin SPA. But in order for vue-router
-      // routes inside the SPA to work, use a tiny rewriting middleware:
+      // routes inside the SPA to work for sub-routes, use a tiny rewriting
+      // middleware that serves up the `index.html` fur sub-routes:
       this.koa.use(async (ctx, next) => {
-        // // Exclude asset requests (css, js, app)
-        if (!ctx.url.match(/^\/(app\.|css\/|js\/)/)) {
+        // // Exclude asset requests (css, js)
+        if (!ctx.url.match(/\.(?:css|js)$/)) {
           ctx.url = '/'
         }
         await next()
       })
       this.koa.use(serve(this.getPath('dist')))
     }
-    return mount(this.url, this.koa)
+    return this.koa
   }
 
-  async setupKoaWebpack() {
-    // https://webpack.js.org/configuration/stats/#stats
-    const stats = {
-      all: false,
-      errors: true,
-      errorDetails: true
-    }
-
-    const middleware = await koaWebpack({
-      config: this.getWebpackConfig(),
-      devMiddleware: {
-        publicPath: '/',
-        stats
-      },
-      hotClient: this.config.hotReload !== false && {
-        // The only way to not log `Failed to parse source map` warnings is
-        // sadly to ignore all warnings:
-        // https://github.com/webpack-contrib/webpack-hot-client/issues/94
-        logLevel: 'error',
-        stats
+  async setupViteServer() {
+    const config = this.getViteConfig()
+    const server = await createServer({
+      ...config,
+      server: {
+        middlewareMode: 'html',
+        watch: {
+          // Watch the @ditojs packages while in dev mode, although they are
+          // inside the node_modules folder.
+          // TODO: This should only really be done if they are symlinked.
+          ignored: ['!**/node_modules/@ditojs/**']
+        }
       }
     })
-    this.koa.use(historyApiFallback())
-    this.koa.use(middleware)
+    this.koa.use(handleConnectMiddleware(server.middlewares, {
+      expandMountPath: true
+    }))
   }
 
-  getVueConfig() {
+  getViteConfig(config = {}) {
     const development = this.mode === 'development'
-    const {
-      build = {},
-      devtool = development ? 'source-map' : false
-    } = this.config
-    return {
-      runtimeCompiler: true,
-      publicPath: `${this.url}/`,
-      configureWebpack: {
-        devtool,
-        // We always need the source build path as entry, even for production,
-        // for things like .babelrc to work when building for dist:
-        entry: [this.getPath('build')],
-        resolve: {
-          alias: {
-            // See https://github.com/webpack-contrib/webpack-hot-client/pull/62
-            'webpack-hot-client/client':
-              require.resolve('webpack-hot-client/client')
-          }
-        },
-        output: {
-          filename: '[name].[hash].js'
-        },
-        optimization: {
-          splitChunks: {
-            // Split dependencies into two chunks, one for all common libraries,
-            // and one for all views, so they can be loaded separately, and only
-            // once authentication was successful.
-            cacheGroups: {
-              common: {
-                name: 'common',
-                test: /\/node_modules\//,
-                chunks: 'all'
-              },
-              views: {
-                name: 'views',
-                test: /\/views\//,
-                chunks: 'all'
-              }
+
+    const cwd = path.resolve('.')
+    const root = this.getPath('build')
+    const base = `${this.url}/`
+    const views = path.join(root, 'views')
+
+    // Read `package.json` from the closest package.json, so we can emulate
+    // ESM-style imports mappings in rollup / vite.
+    const pkg = findUpSync('package.json', { cwd: root })
+    const { imports } = JSON.parse(fs.readFileSync(pkg, 'utf8'))
+
+    return defineConfig(merge({
+      root,
+      base,
+      mode: this.mode,
+      envFile: false,
+      configFile: false,
+      plugins: [
+        createVuePlugin(),
+        createCommonJsPlugin(),
+        {
+          // Private plugin to inject script tag above main module that loads
+          // the `dito` object through its own end-point, see `sendDitoObject()`
+          name: 'inject-dito-object',
+          transformIndexHtml: {
+            enforce: 'post',
+            transform(html) {
+              return html.replace(
+                /(\s*)(<script type="module"[^>]*?><\/script>)/,
+                `$1<script src="${base}dito.js"></script>$1$2`
+              )
             }
           }
-        },
-        module: development
-          // Preserve source-maps in third party dependencies, but do not log
-          // warnings about dependencies that don't come with source-maps.
-          // https://webpack.js.org/loaders/source-map-loader/#ignoring-warnings
-          ? {
-            rules: [
-              {
-                test: /\.(js|css)$/,
-                enforce: 'pre',
-                // Use `require.resolve()` here too, to avoid issues similar to
-                // 'webpack-hot-client/client' above.
-                use: [require.resolve('source-map-loader')]
+        }],
+      build: {
+        ...(development
+          ? {}
+          : {
+            outDir: this.getPath('dist'),
+            assetsDir: '.',
+            emptyOutDir: true,
+            chunkSizeWarningLimit: 1000,
+            rollupOptions: {
+              output: {
+                manualChunks(id) {
+                  if (id.startsWith(views)) {
+                    return 'views'
+                  } else if (id.startsWith(cwd)) {
+                    return 'common'
+                  } else {
+                    const module = id.match(/node_modules\/([^/$]*)/)?.[1] || ''
+                    return picomatch.isMatch(module, CORE_DEPENDENCIES)
+                      ? 'core'
+                      : 'vendor'
+                  }
+                }
               }
-            ]
+            }
           }
-          : {},
-        plugins: [
-          // Use `HtmlWebpackTagsPlugin` plugin to inject a script tag that
-          // load the dito object from the controller, including `dito.settings`
-          new HtmlWebpackTagsPlugin({
-            scripts: ['dito.js'],
-            useHash: true,
-            addHash: (path, hash) => path.replace(/\.js$/, `.${hash}.js`),
-            append: false
-          })
-        ],
-        stats: {
-          warningsFilter: /Failed to parse source map/
-        }
+        )
       },
-
-      chainWebpack: conf => {
-        // Change the location of the HTML template:
-        const { template = 'index.html' } = build
-        conf.plugin('html').tap(args => {
-          args[0].template = /^[./]/.test(template)
-            ? path.resolve(template)
-            : path.join(this.getPath('build'), template)
-          return args
-        })
-        if (development) {
-          // Disable the 'compact' option in babel-loader during development to
-          // prevent complaints when working with the `yarn watch` versions of
-          // dito-admin.umd.min.js and dito-ui.umd.min.js
-          const jsRule = conf.module.rule('js')
-          const hasBabel = jsRule.toConfig().use?.some(
-            ({ loader }) => /\bbabel-loader\b/.test(loader)
-          )
-          if (hasBabel) {
-            jsRule.use('babel-loader').options({ compact: false })
+      optimizeDeps: {
+        exclude: development ? DITO_PACKAGES : [],
+        include: [
+          ...(development ? [] : DITO_PACKAGES),
+          ...NON_ESM_DEPENDENCIES
+        ]
+      },
+      resolve: {
+        extensions: ['.js', '.json', '.vue'],
+        preserveSymlinks: true,
+        alias: [
+          {
+            find: '@',
+            replacement: root
+          },
+          {
+            // Use a custom rollup resolver to emulate ESM-style imports
+            // mappings in vite, as read from `package.json` above:
+            find: /^#/,
+            replacement: '#',
+            customResolver(id) {
+              for (const [find, replacement] of Object.entries(imports)) {
+                picomatch.isMatch(id, find, {
+                  capture: true,
+                  onMatch({ input, regex }) {
+                    const replacementPath = path.resolve(replacement)
+                    const match = input.match(regex)?.[1]
+                    id = match
+                      ? replacementPath.replace('*', match)
+                      : replacementPath
+                  }
+                })
+              }
+              return id
+            }
           }
-          // Make `stats.warningsFilter` work, see:
-          // https://forum.vuejs.org/t/sppress-warnings-in-vue-cli-3/45905/4
-          conf.plugins.delete('friendly-errors')
-        }
+        ]
       }
-    }
+    }, config))
   }
+}
 
-  getVuePlugins() {
-    return this.config.plugins?.map(definition => {
-      const plugin = isString(definition)
-        ? { id: definition }
-        : isObject(definition)
-          ? definition
-          : {}
-      const {
-        id,
-        apply = require(id)
-      } = plugin
-      if (!id) {
-        throw new ControllerError(
-          this,
-          `Invalid plugin definition: ${definition}`
-        )
-      }
-      return { id, apply }
-    })
-  }
+const DITO_PACKAGES = [
+  '@ditojs/admin',
+  '@ditojs/ui',
+  '@ditojs/utils'
+]
 
-  getWebpackConfig() {
-    const service = new VueService(this.getPath('build'), {
-      inlineOptions: this.getVueConfig(),
-      plugins: this.getVuePlugins()
-    })
-    service.init(this.mode)
-    return service.resolveWebpackConfig()
-  }
-}
+const NON_ESM_DEPENDENCIES = [
+  // All non-es modules need to be explicitly included here, and some of
+  // them only work due to the use of `createCommonJsPlugin()`.
+  'vue-color',
+  'vue-js-modal',
+  'vue-multiselect',
+  'vue-notification',
+  'lowlight'
+]
+
+const CORE_DEPENDENCIES = [
+  ...DITO_PACKAGES,
+
+  // TODO: Figure out a way to generate this automatically for the current
+  // dito-admin dependencies, e.g. similar to
+  // `getRollupExternalsFromDependencies()`, perhaps as a script to persist to
+  // a json file?
+
+  'vue',
+  'vue-color',
+  'vue-js-modal',
+  'vue-multiselect',
+  'vue-notification',
+  'vue-router',
+  'vue-upload-component',
+  'vuedraggable',
+
+  'axios',
+  'core-js',
+  'lowlight',
+  'sortablejs',
+  'tiptap',
+  'tiptap-*',
+  'tslib',
+  'prosemirror-*',
+  'codeflask',
+  'rope-sequence',
+  'tinycolor2',
+  'fault',
+  'filesize',
+  'filesize-parser',
+  'format',
+  'highlight.js',
+  'orderedmap',
+  'w3c-keyname'
+]

package/src/controllers/CollectionController.js

@@ -1,6 +1,6 @@
-import { Controller } from './Controller'
-import { ControllerError } from '@/errors'
 import { isObject, isArray, asArray } from '@ditojs/utils'
+import { Controller } from './Controller.js'
+import { ControllerError } from '../errors/index.js'
 
 // Abstract base class for ModelController and RelationController
 export class CollectionController extends Controller {
@@ -25,19 +25,6 @@ export class CollectionController extends Controller {
     this.idValidator = new this.modelClass()
   }
 
-  // @override
-  setupAction(type, actions, name, handler, authorize, verb, path) {
-    // These default actions happen directly on the collection / member route
-    // and are distinguished by their verbs, not by nested paths.
-    if (name in actionToVerb) {
-      verb = actionToVerb[name]
-      path = ''
-    }
-    return super.setupAction(
-      type, actions, name, handler, authorize, verb, path
-    )
-  }
-
   // @override
   setupAssets() {
     const { modelClass } = this
@@ -120,7 +107,7 @@ export class CollectionController extends Controller {
     base = this,
     { query = {}, modify = null, forUpdate = false } = {}
   ) {
-    return this.member.find.call(
+    return this.member.get.call(
       this,
       // Extend `ctx` with a new `query` object, while inheriting the route
       // params in `ctx.params`, so fining the member by id still works.
@@ -202,7 +189,7 @@ export class CollectionController extends Controller {
   }
 
   collection = this.toCoreActions({
-    async find(ctx, modify) {
+    async get(ctx, modify) {
       const result = await this.execute(ctx, (query, trx) => {
         query.find(ctx.query, this.allowParam).modify(getModify(modify, trx))
         return this.isOneToOne ? query.first() : query
@@ -224,7 +211,7 @@ export class CollectionController extends Controller {
       return { count }
     },
 
-    async insert(ctx, modify) {
+    async post(ctx, modify) {
       const result = this.relate
         // Use patchDitoGraphAndFetch() to handle relates for us.
         ? await this.execute(ctx, (query, trx) => query
@@ -239,7 +226,7 @@ export class CollectionController extends Controller {
       return result
     },
 
-    async update(ctx, modify) {
+    async put(ctx, modify) {
       return this.executeAndFetch('update', ctx, modify)
     },
 
@@ -249,7 +236,7 @@ export class CollectionController extends Controller {
   })
 
   member = this.toCoreActions({
-    async find(ctx, modify) {
+    async get(ctx, modify) {
       return this.execute(ctx, (query, trx) => query
         .findById(ctx.memberId)
         .find(ctx.query, this.allowParam)
@@ -270,7 +257,7 @@ export class CollectionController extends Controller {
       return { count }
     },
 
-    async update(ctx, modify) {
+    async put(ctx, modify) {
       return this.executeAndFetchById('update', ctx, modify)
     },
 
@@ -285,11 +272,3 @@ function getModify(modify, trx) {
     ? query => modify(query, trx)
     : null
 }
-
-const actionToVerb = {
-  find: 'get',
-  delete: 'delete',
-  insert: 'post',
-  update: 'put',
-  patch: 'patch'
-}