fix: nextjs story bundle location

ccontrols · Jul 20, 2020 · 636ffac · 636ffac
1 parent 8e13d58
commit 636ffac
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 42 deletions.
diff --git a/core/webpack-compile/README.md b/core/webpack-compile/README.md
@@ -86,7 +86,7 @@ _defined in [@component-controls/webpack-compile/src/types.ts](https://github.co
 
 | Name           | Type                            | Description                                                           |
 | -------------- | ------------------------------- | --------------------------------------------------------------------- |
-| `bundleName`   | string                          | public file name the bundle, by default 'compoonent-controls.js'      |
+| `bundleName`   | string                          | public file name the bundle, by default 'component-controls.js'       |
 | `configPath`   | string                          | path to the configuration file e.g : '.storybook'                     |
 | `distFolder`   | string                          | public output folder for the bundle                                   |
 | `presets`      | [RuleTypes](#ruletypes)         | a list of webpack configuration presets from webpack-configs packages |

diff --git a/core/webpack-compile/src/types.ts b/core/webpack-compile/src/types.ts
@@ -21,7 +21,7 @@ export interface CompileProps {
   /** public output folder for the bundle */
   distFolder?: string;
 
-  /** public file name the bundle, by default 'compoonent-controls.js' */
+  /** public file name the bundle, by default 'component-controls.js' */
   bundleName?: string;
 
   /** public output folder for the assets like images */

diff --git a/core/webpack-compile/src/utilities.ts b/core/webpack-compile/src/utilities.ts
@@ -23,7 +23,7 @@ export type CompileRunProps = CompileProps & {
   mode: Configuration['mode'];
 };
 
-export const defBundleName = 'compoonent-controls.js';
+export const defBundleName = 'component-controls.js';
 
 export const getBundleName = (options: CompileProps) =>
   path.join(

diff --git a/examples/starter/store.js b/examples/starter/store.js
diff --git a/examples/store.js b/examples/store.js
diff --git a/integrations/nextjs-plugin/README.md b/integrations/nextjs-plugin/README.md
@@ -196,7 +196,7 @@ _build [source code](https://github.com/ccontrols/component-controls/tree/master
 | `presets`      | _RuleTypes_     | a list of webpack configuration presets from webpack-configs packages |
 | `configPath`   | _string_        | path to the configuration file e.g : '.storybook'                     |
 | `distFolder`   | _string_        | public output folder for the bundle                                   |
-| `bundleName`   | _string_        | public file name the bundle, by default 'compoonent-controls.js'      |
+| `bundleName`   | _string_        | public file name the bundle, by default 'component-controls.js'       |
 | `staticFolder` | _string_        | public output folder for the assets like images                       |
 
 ## <ins>Layout</ins>

diff --git a/integrations/nextjs-plugin/component-controls.js b/integrations/nextjs-plugin/component-controls.js
diff --git a/integrations/nextjs-plugin/src/build.ts b/integrations/nextjs-plugin/src/build.ts
@@ -1,5 +1,4 @@
 import path from 'path';
-import fs from 'fs';
 import {
   compile,
   watch,
@@ -11,7 +10,6 @@ let builtStarted = false;
 export default ({
   bundleName,
   configPath,
-  distFolder,
   presets,
   staticFolder,
   webPack,
@@ -21,12 +19,13 @@ export default ({
   const userProps: CompileProps = {
     bundleName,
     configPath,
-    staticFolder,
     webPack,
   };
   const options: CompileProps = {
     presets: presets || defaultPresets,
-    distFolder: distFolder || path.join(process.cwd(), defaultConfig.distDir),
+    distFolder: path.resolve(__dirname, '..'),
+    staticFolder:
+      staticFolder || path.join(process.cwd(), defaultConfig.distDir),
     ...userProps,
   };
 
@@ -36,23 +35,7 @@ export default ({
       process.env.NODE_ENV === 'development'
         ? watch(options)
         : compile(options);
-    compiler.then(({ bundleName }) => {
-      //temporary hack to send the bundle name to static props
-      fs.writeFile(
-        path.resolve(__dirname, './store.js'),
-        `
-const { HMRStore } = require('@component-controls/store');
-const bundle = require("${bundleName}");
-const store = new HMRStore(bundle);
-exports.store = store;
-`,
-        err => {
-          if (err) {
-            console.error(err);
-          }
-        },
-      );
-    });
+    compiler.then(() => {});
   }
   return {
     ...rest,

diff --git a/integrations/nextjs-plugin/src/components/Layout.tsx b/integrations/nextjs-plugin/src/components/Layout.tsx
@@ -3,7 +3,7 @@ import { FC } from 'react';
 import { jsx } from 'theme-ui';
 import { DocType } from '@component-controls/core';
 import { AppContext } from '@component-controls/app';
-const { store } = require('./store');
+import { store } from '../store';
 
 import { NextLink } from './NextLink';
 

diff --git a/integrations/nextjs-plugin/src/store.ts b/integrations/nextjs-plugin/src/store.ts
@@ -1,2 +1,3 @@
-import { StoryStore, Store } from '@component-controls/store';
-export const store: StoryStore = new Store();
+import { StoryStore, HMRStore } from '@component-controls/store';
+const bundle = require('../component-controls');
+export const store: StoryStore = new HMRStore(bundle);