chore: reorganize configuration (#242)

Author: ijsnow

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 npm-debug.log
+yarn-error.log
 .DS_Store
 
 # Ignore build/ except for the Phabricator package.json

config/shared/webpack.ts

@@ -0,0 +1,48 @@
+import sassImportOnce from 'node-sass-import-once'
+import * as path from 'path'
+import * as webpack from 'webpack'
+
+export const buildStylesLoaders = (baseLoader: webpack.Loader): webpack.Loader[] => [
+    baseLoader,
+    { loader: 'postcss-loader' },
+    {
+        loader: 'sass-loader',
+        options: {
+            includePaths: [path.resolve(__dirname, '../..', 'node_modules')],
+            importer: sassImportOnce,
+            importOnce: {
+                css: true,
+            },
+        },
+    },
+]
+
+const babelLoader: webpack.RuleSetUseItem = {
+    loader: 'babel-loader',
+    options: {
+        cacheDirectory: true,
+    },
+}
+
+export const tsRule: webpack.RuleSetRule = {
+    test: /\.tsx?$/,
+    use: [
+        babelLoader,
+        {
+            loader: 'ts-loader',
+            options: {
+                compilerOptions: {
+                    target: 'es6',
+                    module: 'esnext',
+                    noEmit: false, // tsconfig.json sets this to true to avoid output when running tsc manually
+                },
+                transpileOnly: process.env.DISABLE_TYPECHECKING === 'true',
+            },
+        },
+    ],
+}
+
+export const jsRule: webpack.RuleSetRule = {
+    test: /\.jsx?$/,
+    loader: babelLoader,
+}

storybook/addons.js renamed to config/storybook/addons.ts

@@ -0,0 +1,11 @@
+import { configure } from '@storybook/react'
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../../stories', true, /\.tsx?$/)
+function loadStories(): void {
+    for (const filename of req.keys()) {
+        req(filename)
+    }
+}
+
+configure(loadStories, module)

config/storybook/config.ts

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDirs": ["src", "stories"]
   }

storybook/preview-head.html renamed to config/storybook/preview-head.html

@@ -0,0 +1,23 @@
+import * as webpack from 'webpack'
+import { buildStylesLoaders, jsRule, tsRule } from '../shared/webpack'
+
+const buildWebpackConfig = (
+    baseConfig: webpack.Configuration,
+    env: any,
+    config: webpack.Configuration
+): webpack.Configuration => {
+    config.module!.rules.push(tsRule)
+    config.module!.rules.push(jsRule)
+    config.resolve!.extensions!.push('.ts', '.tsx')
+
+    // Put our style rules at the beginning so they're processed by the time it
+    // gets to storybook's style rules.
+    config.module!.rules.unshift({
+        test: /\.(css|sass|scss)$/,
+        use: buildStylesLoaders('style-loader'),
+    })
+
+    return config
+}
+
+export default buildWebpackConfig

storybook/tsconfig.json renamed to config/storybook/tsconfig.json

@@ -0,0 +1,59 @@
+import ExtractTextPlugin from 'extract-text-webpack-plugin'
+import * as path from 'path'
+import * as webpack from 'webpack'
+
+import { buildStylesLoaders, jsRule, tsRule } from '../shared/webpack'
+
+const buildEntry = (...files) => files.map(file => path.join(__dirname, file))
+
+const contentEntry = '../../src/config/content.entry.js'
+const backgroundEntry = '../../src/config/background.entry.js'
+const linkEntry = '../../src/config/link.entry.js'
+const optionsEntry = '../../src/config/options.entry.js'
+const pageEntry = '../../src/config/page.entry.js'
+const extEntry = '../../src/config/extension.entry.js'
+
+export default {
+    entry: {
+        background: buildEntry(extEntry, backgroundEntry, '../../src/extension/scripts/background.tsx'),
+        link: buildEntry(extEntry, linkEntry, '../../src/extension/scripts/link.tsx'),
+        options: buildEntry(extEntry, optionsEntry, '../../src/extension/scripts/options.tsx'),
+        inject: buildEntry(extEntry, contentEntry, '../../src/extension/scripts/inject.tsx'),
+        phabricator: buildEntry(pageEntry, '../../src/libs/phabricator/extension.tsx'),
+
+        bootstrap: path.join(__dirname, '../../node_modules/bootstrap/dist/css/bootstrap.css'),
+        style: path.join(__dirname, '../../src/shared/app.scss'),
+    },
+    output: {
+        path: path.join(__dirname, '../../build/dist/js'),
+        filename: '[name].bundle.js',
+        chunkFilename: '[id].chunk.js',
+    },
+    plugins: [
+        new ExtractTextPlugin({
+            filename: '../css/[name].bundle.css',
+            allChunks: true,
+        }),
+    ],
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js'],
+    },
+    module: {
+        rules: [
+            tsRule,
+            jsRule,
+            {
+                // SCSS rule for our own styles and Bootstrap
+                test: /\.(css|sass|scss)$/,
+                use: ExtractTextPlugin.extract(
+                    buildStylesLoaders({
+                        loader: 'css-loader',
+                        options: {
+                            minimize: process.env.NODE_ENV === 'production',
+                        },
+                    })
+                ),
+            },
+        ],
+    },
+} as webpack.Configuration

config/storybook/webpack.config.ts

@@ -9,7 +9,7 @@ const entries = entry as webpack.Entry
 
 const entriesWithAutoReload = {
     ...entries,
-    background: [path.join(__dirname, '../src/extension/scripts/auto-reloading.ts'), ...entries.background],
+    background: [path.join(__dirname, '../../src/extension/scripts/auto-reloading.ts'), ...entries.background],
 }
 
 export default {

config/webpack/base.config.ts

@@ -1,4 +1,4 @@
-import extensionInfo from '../src/extension/manifest.spec.json'
+import extensionInfo from '../../src/extension/manifest.spec.json'
 
 /**
  * Generates a unique bundle ID that is used to prevent the Phabricator extension

webpack/dev.config.ts renamed to config/webpack/dev.config.ts

@@ -16,8 +16,8 @@
     "cypress:open": "yarn run build && cypress open",
     "test:e2e": "yarn run build && cypress run --browser chrome",
     "prettier": "prettier '**/{*.{js?(on),ts?(x),graphql,md,scss},.*.js?(on)}' --write --list-different --config prettier.config.js",
-    "storybook": "start-storybook -c ./storybook -p 6006",
-    "build-storybook": "build-storybook -c ./storybook"
+    "storybook": "start-storybook -c ./config/storybook -p 6006",
+    "build-storybook": "build-storybook -c ./config/storybook"
   },
   "husky": {
     "hooks": {

webpack/prod.config.ts renamed to config/webpack/prod.config.ts

@@ -1,6 +1,6 @@
 import signale from 'signale'
 import webpack from 'webpack'
-import config from '../webpack/prod.config'
+import config from '../config/webpack/prod.config'
 import * as tasks from './tasks'
 
 const buildChrome = tasks.buildChrome('prod')

webpack/utils.ts renamed to config/webpack/utils.ts

@@ -1,7 +1,7 @@
 import { noop } from 'lodash'
 import signale from 'signale'
 import webpack from 'webpack'
-import config from '../webpack/dev.config'
+import config from '../config/webpack/dev.config'
 import * as autoReloading from './auto-reloading'
 import * as tasks from './tasks'
 

package.json

@@ -0,0 +1,7 @@
+declare module 'node-sass-import-once' {
+    import { Plugin } from 'webpack'
+    class NodeSassImportOncePlugin extends Plugin {
+        constructor(options: any)
+    }
+    export = NodeSassImportOncePlugin
+}