Support defaultSrc fallback for docusaurus

docs/src/pages/docs/integrations/docusaurus.md

@@ -44,32 +44,13 @@ $ npm install -D @whyframe/jsx
 ```js
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  plugins: [
-    [
-      '@whyframe/jsx/docusaurus',
-      {
-        defaultSrc: '/frames/default' // provide our own html
-      }
-    ]
-  ]
+  plugins: ['@whyframe/jsx/docusaurus']
 }
 
 module.exports = config
 ```
 
-As `whyframe`'s default HTML doesn't work in Docusaurus, a custom HTML source is required. See [HTML source](/docs/features#html-source) for more information.
-
-To setup `/frames/default`, or in other words `http://localhost:3000/frames/default`, create a `src/pages/frames/default/index.js` file:
-
-```jsx
-import { createApp } from 'whyframe:app'
-
-export default function DefaultFrame() {
-  return <div ref={(el) => createApp(el)}></div>
-}
-```
-
-And done! You can also add more code and styles to `src/pages/frames/default/index.js` if you prefer.
+> In some cases, you may need to run the `docusaurus clear` command for the changes to take effect.
 
 ## Usage
 
@@ -84,4 +65,6 @@ You can edit `src/pages/index.js` to start creating an `iframe`. For example:
 
 Start your app with `npm run dev` and watch `Hello world!` rendered within the `iframe` as-is!
 
+To customize the default `iframe` content, the [StackBlitz demo](/new/docusaurus) has an example of setting up a `/frames/basic` page.
+
 Check out [Features](/docs/features) for more things you can do with `whyframe`.

packages/jsx/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.1.5 (2022-10-05)
+
+- Support `defaultSrc` fallback for docusaurus
+
 ## 0.1.4 (2022-10-03)
 
 - Support docusaurus MDX

packages/jsx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@whyframe/jsx",
   "description": "JSX support for whyframe",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "author": "Bjorn Lu",
   "license": "MIT",
   "type": "module",

packages/jsx/src/docusaurus.cjs

@@ -1,15 +1,19 @@
+const path = require('path')
+
 /** @type {import('../docusaurus').default} */
 module.exports = async function whyframe(_, options) {
   const { WhyframePlugin } = await import('@whyframe/core/webpack')
+  const { parserOptions, defaultSrc, ...pluginOptions } = options
   return {
     name: 'docusaurus-plugin-whyframe',
     configureWebpack() {
-      const { parserOptions, ...pluginOptions } = options
-
       return {
         mergeStrategy: { plugins: 'prepend' },
         plugins: [
-          new WhyframePlugin(pluginOptions),
+          new WhyframePlugin({
+            ...pluginOptions,
+            defaultSrc: defaultSrc || '/__whyframe'
+          }),
           new WhyframeDocusaurusPlugin()
         ],
         module: {
@@ -30,6 +34,15 @@ module.exports = async function whyframe(_, options) {
           ]
         }
       }
+    },
+    contentLoaded({ actions }) {
+      if (!defaultSrc) {
+        actions.addRoute({
+          path: '/__whyframe',
+          component: path.resolve(__dirname, './docusaurusTemplate.jsx'),
+          exact: true
+        })
+      }
     }
   }
 }

packages/jsx/src/docusaurusTemplate.jsx

@@ -0,0 +1,7 @@
+// @ts-ignore
+import { createApp } from 'whyframe:app'
+import React from 'react'
+
+export default function DefaultFrame() {
+  return <div ref={(el) => createApp(el)}></div>
+}

playground/docusaurus/docusaurus.config.js

@@ -57,7 +57,6 @@ const config = {
     [
       '@whyframe/jsx/docusaurus',
       {
-        defaultSrc: '/frames/basic',
         components: [{ name: 'Story', showSource: true }]
       }
     ]