feat: nextjs index pages

.gitignore

@@ -5,4 +5,5 @@ dist
 .rpt2_cache
 *.log
 public
-.next
+.next
+out

core/loader/src/store.ts

@@ -3,9 +3,9 @@ import {
   StoryPackages,
   BuildConfiguration,
   RunConfiguration,
+  Pages,
   Document,
   defDocType,
-  Pages,
   DocType,
   docStoryToId,
 } from '@component-controls/core';
@@ -36,8 +36,6 @@ export interface LoadingStore {
   stores: (Partial<Pick<LoadingDocStore, 'stories' | 'doc'>> & {
     filePath: string;
   })[];
-  getDocs: (type: DocType) => Pages;
-  getUniquesByField: (field: string) => { [key: string]: number };
 }
 
 class Store implements LoadingStore {
@@ -46,48 +44,54 @@ class Store implements LoadingStore {
   packages: LoadingStore['packages'] = {};
   config: LoadingStore['config'] = {};
   buildConfig: LoadingStore['buildConfig'] = {};
-  getDocs = (docType: DocType) =>
-    this.stores
-      .filter(store => {
-        if (store?.doc) {
-          const { type = defDocType } = store.doc;
-          return type === docType;
-        }
-        return false;
-      })
-      .map(
-        store =>
-          ({
-            ...store.doc,
-            stories:
-              store.doc && store.stories
-                ? Object.keys(store.stories).map(id =>
-                    //@ts-ignore
-                    docStoryToId(store.doc.title, id),
-                  )
-                : undefined,
-          } as Document),
-      );
-  getUniquesByField = (field: string) => {
-    return this.stores.reduce((acc: { [key: string]: number }, store) => {
-      if (store?.doc) {
-        //@ts-ignore
-        const value = store.doc[field];
-        const values = Array.isArray(value) ? value : [value];
-        values.forEach(v => {
-          if (v !== undefined) {
-            if (typeof acc[v] === 'undefined') {
-              acc[v] = 0;
-            }
-            acc[v] = acc[v] = 1;
-          }
-        });
-      }
-      return acc;
-    }, {});
-  };
 }
 
+export const getDocs = (
+  stores: LoadingStore['stores'],
+  docType: DocType,
+): Pages =>
+  stores
+    .filter(store => {
+      if (store?.doc) {
+        const { type = defDocType } = store.doc;
+        return type === docType;
+      }
+      return false;
+    })
+    .map(
+      store =>
+        ({
+          ...store.doc,
+          stories:
+            store.doc && store.stories
+              ? Object.keys(store.stories).map(id =>
+                  //@ts-ignore
+                  docStoryToId(store.doc.title, id),
+                )
+              : undefined,
+        } as Document),
+    );
+export const getUniquesByField = (
+  stores: LoadingStore['stores'],
+  field: string,
+): { [key: string]: number } => {
+  return stores.reduce((acc: { [key: string]: number }, store) => {
+    if (store?.doc) {
+      //@ts-ignore
+      const value = store.doc[field];
+      const values = Array.isArray(value) ? value : [value];
+      values.forEach(v => {
+        if (v !== undefined) {
+          if (typeof acc[v] === 'undefined') {
+            acc[v] = 0;
+          }
+          acc[v] = acc[v] = 1;
+        }
+      });
+    }
+    return acc;
+  }, {});
+};
 export const store = new Store();
 
 export const reserveStories = (filePaths: string[]) => {

examples/nextjs/next.config.js

@@ -1,3 +1,3 @@
-const withStories = require('@component-controls/nextjs-plugin');
+const withStories = require('@component-controls/nextjs-plugin/build');
 
 module.exports = withStories({ configPath: '.config', distDir: 'dist' });

examples/nextjs/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "build-sample": "next build",
+    "build-sample": "next build && next export",
     "start": "next -p 9021"
   },
   "repository": {
@@ -16,6 +16,8 @@
   "dependencies": {
     "@component-controls/nextjs-plugin": "^1.8.0",
     "@component-controls/pages": "^1.8.0",
+    "emotion": "^10.0.27",
+    "emotion-server": "^10.0.27",
     "next": "^9.4.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

examples/nextjs/pages/[doctype].tsx

@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+import { GetStaticProps, GetStaticPaths } from 'next';
+import { DocType, defDocType, Pages } from '@component-controls/core';
+import { DocumentHomePage } from '@component-controls/app';
+import { getDocs } from '@component-controls/loader';
+import { Layout } from '@component-controls/nextjs-plugin';
+
+interface PageListProps {
+  type: DocType;
+  docId?: string;
+}
+
+const DocHomeTemplate: FC<PageListProps> = ({ type = defDocType, docId }) => {
+  return (
+    <Layout docId={docId} type={type}>
+      <DocumentHomePage type={type} />
+    </Layout>
+  );
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const paths: string[] = [];
+  const store = require('@component-controls/webpack-compile/bundle');
+  const { pages } = store.buildConfig || {};
+  if (pages) {
+    Object.keys(pages).forEach(type => {
+      const page = pages[type as DocType];
+      //const docType = type as DocType;
+      // const docs = getDocs(store.stores, docType);
+      paths.push(`/${page.basePath}`);
+    });
+  }
+  return { paths, fallback: false };
+};
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  const store = require('@component-controls/webpack-compile/bundle');
+  const { doctype: basepath } = params as { doctype: string };
+
+  const { pages } = store.buildConfig || {};
+  const doctype = Object.keys(pages).find(key => {
+    return pages[key].basePath.replace(/\//g, '') === basepath;
+  }) as DocType;
+  const docs: Pages = getDocs(store.stores, doctype);
+  const page = pages[doctype];
+  const docsPage = docs.find(doc => doc?.route === `/${page.basePath}`);
+  return { props: { docId: docsPage?.title || null, type: doctype } };
+};
+
+export default DocHomeTemplate;

examples/nextjs/pages/_app.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import NextApp from 'next/app';
+import { CacheProvider } from '@emotion/core';
+
+// Use only { cache } from 'emotion'. Don't use { css }.
+import { cache } from 'emotion';
+
+export default class App extends NextApp {
+  render() {
+    const { Component, pageProps } = this.props;
+    return (
+      <CacheProvider value={cache}>
+        <Component {...pageProps} />
+      </CacheProvider>
+    );
+  }
+}

examples/nextjs/pages/_document.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Document, { Head, Main, NextScript } from 'next/document';
+import { extractCritical } from 'emotion-server';
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx);
+    const styles = extractCritical(initialProps.html);
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          <style
+            data-emotion-css={styles.ids.join(' ')}
+            dangerouslySetInnerHTML={{ __html: styles.css }}
+          />
+        </>
+      ),
+    };
+  }
+
+  render() {
+    return (
+      <html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    );
+  }
+}

examples/nextjs/pages/index.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { GetStaticProps } from 'next';
+
+import { DocType, defDocType } from '@component-controls/core';
+import { DocPage } from '@component-controls/app';
+import { Layout } from '@component-controls/nextjs-plugin';
+import { LoadingDocStore } from '@component-controls/instrument';
+
+interface PageListProps {
+  type: DocType;
+  docId?: string;
+}
+
+const HomePage: FC<PageListProps> = ({ type = defDocType, docId }) => {
+  return (
+    <Layout docId={docId} type={type}>
+      <DocPage type={type} />
+    </Layout>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async () => {
+  const store = require('@component-controls/webpack-compile/bundle');
+  const homePage = store.stores.find(
+    (s: LoadingDocStore) => s.doc?.route === '/',
+  );
+  return { props: { docId: homePage?.doc?.title, type: homePage?.doc?.type } };
+};
+
+export default HomePage;

integrations/gatsby-theme-stories/src/gatsby-node.ts

@@ -4,7 +4,9 @@ import {
   getStoryPath,
   DocType,
   TabConfiguration,
+  Pages,
 } from '@component-controls/core';
+import { getDocs, getUniquesByField } from '@component-controls/loader';
 
 import {
   compile,
@@ -23,7 +25,7 @@ exports.createPages = async (
   const { createPage } = actions;
   const config: CompileProps = {
     webPack: options.webpack,
-    presets: defaultPresets,
+    presets: options.presets || defaultPresets,
     configPath: options.configPath,
     outputFolder:
       options.outputFolder || `${path.join(process.cwd(), 'public')}`,
@@ -39,7 +41,7 @@ exports.createPages = async (
         if (!categories.includes(type as DocType)) {
           const page = pages[type as DocType];
           const docType = type as DocType;
-          const docs = store.getDocs(docType);
+          const docs: Pages = getDocs(store.stores, docType);
           const tabs: Pick<TabConfiguration, 'route'>[] = page.tabs || [
             { route: undefined },
           ];
@@ -86,7 +88,7 @@ exports.createPages = async (
         }
       });
       categories.forEach(catName => {
-        const cats = store.getUniquesByField(catName);
+        const cats = getUniquesByField(store.stores, catName);
         const catPage = pages[catName as DocType];
         const catKeys = Object.keys(cats);
         catKeys.forEach(tag => {
@@ -105,16 +107,14 @@ exports.createPages = async (
             },
           });
         });
-        if (catKeys.length) {
-          createPage({
-            path: `/${catPage.basePath}`,
-            component: require.resolve(`../src/templates/CategoryList.tsx`),
-            context: {
-              type: catName,
-              docId: null,
-            },
-          });
-        }
+        createPage({
+          path: `/${catPage.basePath}`,
+          component: require.resolve(`../src/templates/DocHome.tsx`),
+          context: {
+            type: catName,
+            docId: null,
+          },
+        });
       });
     }
     const homePage = store.stores.find(s => s.doc?.route === '/');

integrations/nextjs-plugin/build.js

@@ -0,0 +1 @@
+module.exports = require('./dist/build');

integrations/nextjs-plugin/package.json

@@ -12,7 +12,8 @@
   "files": [
     "dist/",
     "package.json",
-    "README.md"
+    "README.md",
+    "build.js"
   ],
   "scripts": {
     "build": "yarn cross-env NODE_ENV=production rollup -c",

integrations/nextjs-plugin/rollup.config.js

@@ -1,5 +1,5 @@
 import { config } from '../../rollup-config';
 
 export default config({
-  input: ['./src/index.ts'],
+  input: ['./src/index.ts', './src/build.ts'],
 });