fix: timing issue with ploader plugin

.vscode/launch.json

@@ -49,7 +49,37 @@
         "<node_internals>/**"
       ]
     },
-
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "custom-pages-storybook-5",
+      "runtimeExecutable": "npm",
+      "cwd": "${workspaceFolder}/examples/custom-pages-storybook-5",
+      "runtimeArgs": [
+        "run-script",
+        "debug"
+      ],
+      "port": 9229,
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "custom-pages-storybook-6",
+      "runtimeExecutable": "npm",
+      "cwd": "${workspaceFolder}/examples/custom-pages-storybook-6",
+      "runtimeArgs": [
+        "run-script",
+        "debug"
+      ],
+      "port": 9229,
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
+    },
+
     {
       "type": "node",
       "request": "launch",

core/loader/rollup.config.js

@@ -5,7 +5,6 @@ export default config({
     './src/index.ts',
     './src/store.ts',
     './src/loader.ts',
-    './src/plugin.ts',
     './src/runtimeLoader.ts',
     './src/story-store-data.ts',
   ],

core/loader/src/runtimeLoader.ts

@@ -38,14 +38,14 @@ module.exports = function() {
       }
     }
   }
-
 `;
-  const exports = `export default store;\n`;
+  const exports = `module.exports = store;\n`;
   const newContent = `
 ${imports}
 ${storeConst}
 ${loadStories}
 ${exports}
 `;
+  debugger;
   return newContent;
 };

examples/custom-pages-storybook-6/.storybook/main.js

@@ -1,44 +1,25 @@
-const path = require('path');
 
 module.exports = {
   stories: [
-    '../../../ui/editors/src/**/*.stories.(js|tsx|mdx)',
-    '../../../ui/components/src/**/*.stories.(js|tsx|mdx)',
-    '../../../ui/blocks/src/**/*.stories.(js|tsx|mdx)',
-    '../../stories/src/**/*.stories.(js|tsx|mdx)',
-    '../stories/**/*.stories.(js|tsx|mdx)',
+    '../src/stories/**/*.stories.(js|mdx)',
   ],
   addons: [
-    {
-      name: '@storybook/preset-typescript',
-      options: {
-        tsLoaderOptions: {
-          configFile: path.resolve(__dirname, '../tsconfig.json'),
-        },
-      },
-    },
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-      },
-    },
+    '@storybook/addon-docs',
     {
       name: '@component-controls/storybook',
       options: {
         pages: [],
         controlsPanel: false,
       }
     },
-    { 
+    {
       name: '@component-controls/storybook-custom-docs',
       options: {
         pages: [
-          require.resolve('./page-simple.tsx'),
-          require.resolve('./page-docs-blocks.tsx'),
-          require.resolve('./page-component-blocks.tsx'),
-          require.resolve('./page-mixed-blocks.tsx'),
-          require.resolve('./canvas-page.tsx'),
+          require.resolve('./page-story.js'),
+          require.resolve('./page-docs-blocks.js'),
+          require.resolve('./page-component-blocks.js'),
+          require.resolve('./page-mixed-blocks.js'),
         ]
       },
     }

examples/custom-pages-storybook-6/.storybook/page-component-blocks.tsx → examples/custom-pages-storybook-6/.storybook/page-component-blocks.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { DocsContainer } from '@component-controls/storybook';
 import { Story, Title, ControlsTable, Playground  } from '@component-controls/blocks';
-import { CustomPageDef } from '@component-controls/storybook-custom-docs';
 
 
 const Page = ({ active }) => {
@@ -15,7 +14,7 @@ const Page = ({ active }) => {
     </DocsContainer>
   )
 }
-const page: CustomPageDef = {
+const page = {
   key: 'component-page',
   title: 'Controls blocks',
   render: ({ active }) => {

examples/custom-pages-storybook-6/.storybook/page-docs-blocks.tsx → examples/custom-pages-storybook-6/.storybook/page-docs-blocks.js

@@ -1,17 +1,20 @@
 import React from 'react';
-import { DocsContainer, Primary, Title } from '@storybook/addon-docs/blocks';
-import { getContext } from '@component-controls/storybook-custom-docs';
-import { CustomPageDef } from '@component-controls/storybook-custom-docs';
+import { DocsContainer, Story, Preview, Source, Title } from '@storybook/addon-docs/blocks';
+import { getContext, useStoryId } from '@component-controls/storybook-custom-docs';
 
 const Page = () => {
+  useStoryId();
   return (
     <DocsContainer context={getContext()}>
       <Title>Using storybook docs page blocks</Title>
-      <Primary />
+      <Preview>
+        <Story id="." />
+      </Preview>
+      <Source id="." />
     </DocsContainer>
   )
 }
-const page: CustomPageDef = {
+const page = {
   key: 'docs-page',
   title: 'Docs blocks',
   render: ({ active }) => {

examples/custom-pages-storybook-6/.storybook/page-mixed-blocks.tsx → examples/custom-pages-storybook-6/.storybook/page-mixed-blocks.js

@@ -3,7 +3,6 @@ import { DocsContainer as SBDocsContainer, Preview, Story as SBStory, Title as S
 import { getContext, useStoryId } from '@component-controls/storybook-custom-docs';
 import { DocsContainer } from '@component-controls/storybook';
 import { Story, Title, Playground, PropsTable  } from '@component-controls/blocks';
-import { CustomPageDef } from '@component-controls/storybook-custom-docs';
 
 
 const Page = () => {
@@ -28,7 +27,7 @@ const Page = () => {
     </>
   )
 }
-const page: CustomPageDef = {
+const page = {
   key: 'mixed-page',
   title: 'Mixed blocks',
   render: ({ active }) => {

examples/custom-pages-storybook-6/.storybook/page-story.js

@@ -0,0 +1,20 @@
+import React, { createElement }  from 'react';
+import { useStoryId, getContext } from '@component-controls/storybook-custom-docs';
+
+const CustomPage = () => {
+  //useStoryId so the function is refreshed on story change
+  useStoryId();
+  return (
+    <div>
+      <h1>Simple docs page</h1>
+      {createElement(getContext().storyFn)}
+    </div>
+  );  
+}
+const page = {
+  key: 'custom',
+  title: 'Simple Page',
+  render: ({ active }) => active ? <CustomPage  /> : null,
+}
+
+export default page;

examples/custom-pages-storybook-6/package.json

@@ -1,26 +1,42 @@
 {
+  "name": "custom-pages-storybook-6",
   "private": true,
   "version": "1.0.1",
-  "name": "component-controls-storybook-custom-docs-pages",
+  "main": "index.js",
   "license": "MIT",
   "scripts": {
     "debug": "NODE_OPTIONS=--inspect-brk start-storybook -p 9017 -c .storybook",
+    "start": "webpack-dev-server --open --mode development",
     "storybook": "start-storybook -p 9017 -c .storybook",
     "build-storybook": "build-storybook -c .storybook -o ./docs"
   },
   "dependencies": {
-    "@component-controls/specification": "^1.0.1",
     "@component-controls/storybook": "^1.0.1",
     "@component-controls/storybook-custom-docs": "^1.0.1",
+    "@storybook/addons": "6.0.0-alpha.28",
     "@storybook/addon-docs": "6.0.0-alpha.28",
-    "@storybook/preset-typescript": "*",
+    "@storybook/api": "6.0.0-alpha.28",
+    "@storybook/client-api": "6.0.0-alpha.28",
     "@storybook/react": "6.0.0-alpha.28",
-    "babel-loader": "^8.0.6",
-    "babel-preset-react-app": "^9.0.0",
-    "cross-env": "^5.2.0",
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-react": "^7.9.4",
+    "babel-loader": "^8.1.0",
+    "core-js": "^3.6.5",
     "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "typescript": "^3.8.3"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "devDependencies": {
+    "html-webpack-plugin": "^4.2.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  },
+  "babel":{
+    "presets" : [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
   }
 }

examples/custom-pages-storybook-6/src/components/Person.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Person = ({ name, age }) => (
+  <div>{`My name is ${name} and I am ${age} years old`}</div>
+);
+
+Person.propTypes = {
+  name: PropTypes.string,
+  age: PropTypes.number,
+};
+Person.defaultProps = {
+  name: 'Martin',
+  age: 22,
+};

examples/custom-pages-storybook-6/src/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Create custom docs pages in storybookjs</title>
+</head>
+<body>
+<div id="root"></div>
+</body>
+</html>

examples/custom-pages-storybook-6/src/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Person } from './components/Person';
+
+ReactDOM.render(
+  <Person />, 
+  document.getElementById("root")
+);

examples/custom-pages-storybook-6/src/stories/person.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Person } from '../components/Person';
+
+export default {
+  title: 'Stories/Person',
+  component: Person
+}
+
+export const main = () => <Person />
+
+export const custom = () => <Person age={55} name="Peter" />