import all packages for live demo

docs/gridsome.config.js

@@ -45,6 +45,14 @@ module.exports = {
     },
   ],
   runtimeCompiler: true,
+  configureWebpack: {
+    node: {
+      fs: 'empty',
+      child_process: 'empty',
+      tls: 'empty',
+      net: 'empty',
+    },
+  },
   chainWebpack(config) {
     // Load variables for all vue-files
     const types = ['vue-modules', 'vue', 'normal-modules', 'normal']

docs/gridsome.server.js

@@ -1,65 +1,89 @@
 const path = require('path')
 const globby = require('globby')
-const TypeDoc = require('typedoc')
+// const TypeDoc = require('typedoc')
 
-const packages = globby.sync('../packages/*', { onlyDirectories: true })
+// const packages = globby.sync('../packages/*', { onlyDirectories: true })
-  .map(name => name.replace('../packages/', ''))
+//   .map(name => name.replace('../packages/', ''))
-  .filter(name => name.startsWith('core'))
+//   .filter(name => name.startsWith('core'))
-  .map(name => {
+//   .map(name => {
-    const app = new TypeDoc.Application()
+//     const app = new TypeDoc.Application()
 
-    app.options.addReader(new TypeDoc.TSConfigReader())
+//     app.options.addReader(new TypeDoc.TSConfigReader())
-    app.options.addReader(new TypeDoc.TypeDocReader())
+//     app.options.addReader(new TypeDoc.TypeDocReader())
-    app.bootstrap({
+//     app.bootstrap({
-      mode: 'file',
+//       mode: 'file',
-      ignoreCompilerErrors: true,
+//       ignoreCompilerErrors: true,
-      experimentalDecorators: true,
+//       experimentalDecorators: true,
-      excludeExternals: true,
+//       excludeExternals: true,
-      excludeNotExported: true,
+//       excludeNotExported: true,
-      excludeProtected: true,
+//       excludeProtected: true,
-      excludePrivate: true,
+//       excludePrivate: true,
-      // excludeNotDocumented: true,
+//       // excludeNotDocumented: true,
-      exclude: [
+//       exclude: [
-        '**/*.test.ts',
+//         '**/*.test.ts',
-        '**/__tests__/*',
+//         '**/__tests__/*',
-        '**/__mocks__/*',
+//         '**/__mocks__/*',
-      ],
+//       ],
-    })
+//     })
 
-    const project = app.convert(app.expandInputFiles([`../packages/${name}`]))
+//     const project = app.convert(app.expandInputFiles([`../packages/${name}`]))
 
-    if (project) {
+//     if (project) {
-      // app.generateDocs(project, `api/${name}`)
+//       // app.generateDocs(project, `api/${name}`)
-      // app.generateJson(project, `api/${name}.json`)
+//       // app.generateJson(project, `api/${name}.json`)
-      const json = app.serializer.projectToObject(project)
+//       const json = app.serializer.projectToObject(project)
-      return json
+//       return json
-    }
+//     }
 
-    return null
+//     return null
-  })
+//   })
-  .filter(package => !!package)
+//   .filter(package => !!package)
+
+// const packages = globby.sync('../packages/*', { onlyDirectories: true })
+//   .map(name => name.replace('../packages/', ''))
+//   .map(name => {
+//     // config.resolve.alias
+//     // .set(`@tiptap/${name}`, path.resolve(`../packages/${name}/index.ts`))
+//     return {
+//       name: `@tiptap/${name}`,
+//       module: require(`../packages/${name}/index.ts`),
+//     }
+//   })
 
 module.exports = function (api) {
 
   api.loadSource(({ addCollection }) => {
     const appCollection = addCollection({ typeName: 'Package' })
 
-    packages.forEach(package => {
+    // packages.forEach(package => {
-      appCollection.addNode(package)
+    //   appCollection.addNode(package)
-    })
+    // })
+
+    globby.sync('../packages/*', { onlyDirectories: true })
+      .map(name => name.replace('../packages/', ''))
+      .forEach(name => {
+        appCollection.addNode({ name })
+        // config.resolve.alias
+        // .set(`@tiptap/${name}`, path.resolve(`../packages/${name}/index.ts`))
+        // appCollection.addNode({
+        //   name: `@tiptap/${name}`,
+        //   module: require(`../packages/${name}/index.ts`),
+        // })
+      })
+
   })
 
-  api.createPages(({ createPage }) => {
+  // api.createPages(({ createPage }) => {
-    packages.forEach(package => {
+  //   packages.forEach(package => {
-      createPage({
+  //     createPage({
-        path: `/api/${package.name}`,
+  //       path: `/api/${package.name}`,
-        component: './src/templates/ApiPage/index.vue',
+  //       component: './src/templates/ApiPage/index.vue',
-        context: {
+  //       context: {
-          package,
+  //         package,
-        },
+  //       },
-      })
+  //     })
-    })
+  //   })
-  })
+  // })
 
   api.chainWebpack(config => {
     config.resolve.extensions

docs/src/components/LiveDemo/index.vue

@@ -23,10 +23,21 @@
   </div>
 </template>
 
+<static-query>
+query {
+  packages: allPackage {
+    edges {
+      node {
+        name
+      }
+    }
+  }
+}
+</static-query>
+
 <script>
 import collect from 'collect.js'
 import { VueLive } from 'vue-live'
-import * as starterKit from '@tiptap/vue-starter-kit'
 import CustomLayout from './CustomLayout'
 
 export default {
@@ -50,13 +61,25 @@ export default {
       syntax: {
         vue: 'markup',
       },
-      requires: {
-        '@tiptap/vue-starter-kit': starterKit,
-      },
     }
   },
 
   computed: {
+    requires() {
+      const names = this.$static.packages.edges
+        .map(item => item.node.name)
+        .filter(name => name !== 'html')
+
+      const packages = Object.fromEntries(names.map(name => {
+        const module = require(`~/../../packages/${name}/index.ts`)
+        const onlyDefault = module.default && Object.keys(module).length === 1
+
+        return [`@tiptap/${name}`, onlyDefault ? module.default : module]
+      }))
+
+      return packages
+    },
+
     file() {
       return this.files[0]
     },