docs onfig

Author: ShaMan123

docs/component-docs.config.js

@@ -44,15 +44,17 @@ const mapToObject = (filePath, group) =>
   fs
     .readdirSync(filePath, { withFileTypes: true })
     .map(file => {
-      if (fs.lstatSync(path.resolve(filePath, file)).isDirectory()) {
+      const name = typeof file === 'string' ? file : file.name;
+      //fs.lstatSync(path.resolve(filePath, file)).isDirectory()
+      if (file.isDirectory()) {
         return mapToObject(
-          path.join(filePath, file),
-          nameToGroupTitle(file)
+          path.join(filePath, name),
+          nameToGroupTitle(name)
         );
       } else {
         const result = {
-          file: path.join(filePath, file),
-          type: getType(file),
+          file: path.join(filePath, name),
+          type: getType(name),
         };
         if (group) {
           result.group = group;
@@ -70,5 +72,5 @@ module.exports = {
   pages: docs,
   output: dist,
   github,
-  //open: true
+  open: true
 };

docs/package.json

@@ -4,11 +4,10 @@
   "description": "Documentation for React Native Reanimated Canavs",
   "private": true,
   "scripts": {
-    "start": "component-docs serve",
-    "build": "component-docs build && npm run patch",
+    "serve": "npm run build && webpack-dev-server",
+    "build": "component-docs build && npm run patch && webpack",
     "patch": "node patch.js",
     "clean": "del dist/",
-    "prestart1": "npm run clean",
     "deploy": "npm run build && gh-pages -d dist"
   },
   "devDependencies": {
@@ -18,18 +17,25 @@
     "@babel/preset-env": "^7.2.3",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@webpack-cli/serve": "^0.2.0",
     "babel-plugin-module-resolver": "^4.0.0",
+    "command-line-args": "^5.1.1",
     "core-js": "^2.6.8",
+    "css-loader": "^3.4.0",
     "del-cli": "^1.1.0",
     "file-loader": "^1.1.11",
     "gh-pages": "^2.1.1",
-    "url-loader": "^1.0.1"
+    "style-loader": "^1.1.1",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.41.4",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.1"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
     "color": "^2.0.1",
-    "component-docs": "^0.19.5",
+    "component-docs": "^0.20.3",
     "linaria": "^1.2.4",
     "react-native-vector-icons": "^6.4.2"
   }

docs/patch.js

@@ -2,10 +2,17 @@
 const path = require('path');
 const fs = require('fs');
 
+const pn = path.resolve(__dirname, 'node_modules').replace(/\\/g, '/');
+const p = path.resolve(__dirname).replace(/\\/g, '/');
+
 function patch() {
   const needsPatch = path.resolve(__dirname, 'dist', 'app.src.js');
-  const newContent = fs.readFileSync(needsPatch).toString().replace(/\\/g, '/');
-  fs.writeFileSync(needsPatch, newContent);
+  let rawContent = fs.readFileSync(needsPatch).toString();
+  rawContent = rawContent.replace(/\\/g, '/');
+  rawContent = rawContent.replace(new RegExp(`${pn}/`, 'g'), '');
+  rawContent = rawContent.replace(new RegExp(`${p}/`, 'g'), '../');
+
+  fs.writeFileSync(needsPatch, rawContent);
 }
 
 patch();

docs/webpack.config.js

@@ -0,0 +1,139 @@
+/* @flow weak */
+
+const webpack = require('webpack');
+const path = require('path');
+const fs = require('fs');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const babelrc = require('component-docs/dist/utils/getBabelOptions')({
+  modules: false,
+  targets: {
+    browsers: ['last 2 versions', 'safari >= 7'],
+  },
+});
+
+const createWebpackConfig = require('component-docs/dist/utils/configureWebpack').default;
+
+//const componentDocsConfig = require('./component-docs.config');
+//const pathToCSS = componentDocsConfig.style
+
+fs.copyFileSync(path.resolve(__dirname, './assets/styles.css'), path.resolve(__dirname, 'dist', 'app.css'));
+
+const config = {
+  root: path.resolve(__dirname, '..'),
+  entry: path.resolve(__dirname, './dist/app.src.js'),
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    bundle: 'app.bundle.js',
+    style: 'app.css',
+  },
+  production: true
+}
+
+function mergeConfig() {
+  const { production, entry, root, output } = config;
+  const componentDocsWebpackConfig = createWebpackConfig(config);
+  const patch = {
+    context: root,
+    mode: production ? 'production' : 'development',
+    devtool: 'source-map',
+    entry: production
+      ? entry
+      : [require.resolve('webpack-hot-middleware/client'), entry],
+    output: {
+      path: output.path,
+      filename: output.bundle,
+      publicPath: '/',
+    },
+    optimization: {
+      minimize: production,
+      namedModules: true,
+      concatenateModules: true,
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        'process.env': {
+          NODE_ENV: JSON.stringify(production ? 'production' : 'development'),
+        },
+      }),
+      new MiniCssExtractPlugin({
+        filename: output.style,
+      }),
+    ].concat(
+      production
+        ? [new webpack.LoaderOptionsPlugin({ minimize: true, debug: false })]
+        : [
+          new webpack.HotModuleReplacementPlugin(),
+          new webpack.NoEmitOnErrorsPlugin(),
+        ]
+    ),
+    module: {
+      rules: [
+        {
+          test: /\.(js|tsx?)$/,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: require.resolve('babel-loader'),
+              options: babelrc,
+            },
+            {
+              loader: require.resolve('linaria/loader'),
+              options: { sourceMap: !production, babelOptions: babelrc },
+            },
+          ],
+        },
+        {
+          test: /\.css$/,
+          use: [
+            'css-loader',
+            { loader: require.resolve('css-hot-loader') },
+            {
+              loader: MiniCssExtractPlugin.loader,
+              options: {
+                sourceMap: !production,
+                publicPath: (resourcePath, context) => {
+                  // publicPath is the relative path of the resource to the context
+                  // e.g. for ./css/admin/main.css the publicPath will be ../../
+                  // while for ./css/main.css the publicPath will be ../
+                  return resourcePath
+                  //return path.relative(path.dirname(resourcePath), context) + '/';
+                },
+              },
+            },
+            {
+              loader: require.resolve('css-loader'),
+              options: { sourceMap: !production },
+            },
+          ],
+        },
+        {
+          test: /\.(bmp|gif|jpg|jpeg|png|svg|webp|eot|woff|woff2|ttf)$/,
+          use: {
+            loader: require.resolve('file-loader'),
+            options: {
+              outputPath: 'assets/',
+              publicPath: 'assets/',
+            },
+          },
+        },
+      ],
+    },
+  }
+
+  return patch;
+}
+
+
+
+
+
+module.exports = {
+  ...createWebpackConfig(config),
+
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    compress: true,
+    port: 9000
+  }
+};