feat: Add StyledComponentsPlugin #1366 (#1449)

eds-snippets · nchanged · commit 785cd8f9fe67 · 2018-12-13T09:24:49.000+01:00
* feat: Add StyledComponentsPlugin #1366 * Move styled-components and typescript-plugin-styled-components dependencies to devDependencies * Add documentation for StyledComponentsPlugin * Remove unnecessary code from StyledComponentsPlugin * feat: Move typescript-plugins-styled-components to init * feat: Add additional check for require.resolve function in StyledComponentsPlugin.ts
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
   "description": "Fuse-Box a bundler that does it right",
   "devDependencies": {
     "@types/node": "^6.0.116",
+    "@types/styled-components": "^4.1.3",
     "babel-core": "^6.26.3",
     "babel-generator": "^6.26.1",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
@@ -109,9 +110,11 @@
     "reflect-metadata": "^0.1.8",
     "run-sequence": "^1.2.2",
     "should": "^11.1.0",
+    "styled-components": "^4.1.2",
     "stylus": "^0.54.5",
     "terser": "^3.10.11",
     "typescript": "^3.1.0",
+    "typescript-plugin-styled-components": "^1.0.0",
     "uglify-es": "^3.3.9",
     "uglify-js": "^3.4.7",
     "validate-commit-msg": "^2.14.0",
@@ -150,4 +153,4 @@
   },
   "typings": "index.d.ts",
   "version": "3.7.0-next.9"
-}
+}
diff --git a/src/index.ts b/src/index.ts
@@ -47,6 +47,7 @@ export { CopyPlugin } from "./plugins/CopyPlugin";
 export { WebIndexPlugin } from "./plugins/WebIndexPlugin";
 export { PlainJSPlugin } from "./plugins/PlainJSPlugin";
 export { ConsolidatePlugin } from "./plugins/ConsolidatePlugin";
+export { StyledComponentsPlugin } from "./plugins/StyledComponentsPlugin";
 export { File } from "./core/File";
 import * as _SparkyCollection from "./sparky/index";
 export const SparkyCollection = _SparkyCollection;
diff --git a/src/plugins/StyledComponentsPlugin.ts b/src/plugins/StyledComponentsPlugin.ts
@@ -0,0 +1,34 @@
+import { WorkFlowContext } from "./../core/WorkflowContext";
+import { Plugin } from "../core/WorkflowContext";
+
+/**
+ * @export
+ * @class StyledComponentsPluginClass
+ * @implements {Plugin}
+ */
+export class StyledComponentsPluginClass implements Plugin {
+  public options;
+	constructor(options = {}) {
+    this.options = options;
+  }
+
+  public init(context: WorkFlowContext) {
+    if (typeof require.resolve === 'function') {
+      try {
+        require.resolve('typescript-plugin-styled-components');
+      } catch(e) {
+          throw new Error(`Cannot find module 'typescript-plugin-styled-components', install it to devDependency\nnpm install --save-dev typescript-plugin-styled-components`)
+      }
+    }
+    const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;
+    context.allowExtension(".tsx");
+    const styledComponentsTransformer = createStyledComponentsTransformer(this.options);
+    context.fuse.opts.transformers = {
+        before: [styledComponentsTransformer]
+    };
+  }
+}
+
+export const StyledComponentsPlugin = (options) => {
+	return new StyledComponentsPluginClass(options);
+};
diff --git a/src/tests/plugins/StyledComponentsPlugin.test.ts b/src/tests/plugins/StyledComponentsPlugin.test.ts
@@ -0,0 +1,58 @@
+import { should } from "fuse-test-runner";
+import { createEnv } from "../stubs/TestEnvironment";
+import { StyledComponentsPlugin } from "../../plugins/StyledComponentsPlugin";
+
+export class StyledComponentsPluginTest {
+	"Should return styled component"() {
+		return createEnv({
+			project: {
+				files: {
+					"index.tsx": `
+								import * as React from 'react';
+								import * as ReactDOM from 'react-dom';
+								import styled from 'styled-components'
+                const MyTestTitle = styled.h1\`
+                  color: red;
+                \`;
+                ReactDOM.render(
+									<MyHeader>Test</MyHeader>, document.getElementById('root'));`,
+				},
+				plugins: [StyledComponentsPlugin()],
+				instructions: ">index.tsx",
+			},
+		}).then(result => {
+			result.project.FuseBox.import("./index");
+			const contents = result.projectContents.toString();
+			should(contents).findString("React.createElement(MyHeader, null, \"Test\")");
+		});
+	}
+
+	"Should return styled component with option getDisplayName"() {
+		return createEnv({
+			project: {
+				files: {
+					"index.tsx": `
+								import * as React from 'react';
+								import * as ReactDOM from 'react-dom';
+								import styled from 'styled-components'
+                const MyTestTitle = styled.h1\`
+                  color: red;
+                \`;
+                ReactDOM.render(
+									<MyHeader>Test</MyHeader>, document.getElementById('root'));`,
+				},
+				plugins: [StyledComponentsPlugin({
+					getDisplayName: function(filename, bindingName) {
+						return 'Testing_' + bindingName + '_value';
+					}
+				})],
+				instructions: ">index.tsx",
+			},
+		}).then(result => {
+			result.project.FuseBox.import("./index");
+			const contents = result.projectContents.toString();
+			should(contents).findString("Testing_MyTestTitle_value");
+		});
+	}
+
+}
diff --git a/website/sidebars.json b/website/sidebars.json
@@ -58,6 +58,7 @@
       "plugins/replace-plugin",
       "plugins/sass-plugin",
       "plugins/source-map-plain-js-plugin",
+      "plugins/styled-components-plugin",
       "plugins/stylus-plugin",
       "plugins/svg-plugin",
       "plugins/uglifyes-plugin",
diff --git a/website/versioned_docs/version-3.6.0/plugins/styled-components-plugin.md b/website/versioned_docs/version-3.6.0/plugins/styled-components-plugin.md
@@ -0,0 +1,83 @@
+---
+id: version-3.6.0-styled-components-plugin
+title: CSSModules
+original_id: styled-components-plugin
+---
+
+## Description
+
+StyledComponentsPlugin improves development experience of `styled-components` via transformer/plugin `typescript-plugin-styled-components`. Which main purpose is to provide compile-time information of creates styled components, such as names of these components, for the run-time, allowing to operate with proper names of such the components.
+
+## Install
+
+Using the StyledComponentsPlugin requires `styled-components` and `typescript-plugin-styled-components` to transform  styled components to reactive components.
+
+```bash
+yarn add styled-components --dev
+yarn add typescript-plugin-styled-components --dev
+
+// OR
+
+npm install styled-components --save-dev
+npm install typescript-plugin-styled-components --save-dev
+```
+
+## Usage
+
+After that you can use the `StyledComponentsPlugin` in your configuration.
+
+```js
+Fusebox.init({
+  homeDir: "src",
+  output: "dist/$name.js",
+  plugins: [StyledComponentsPlugin()],
+})
+  .bundle("app")
+  .instructions(">index.js");
+```
+
+This will create styled components with `bundleName` variable. For example if you have `header.tsx` file:
+
+```tsx
+const MyHeader = styled.header`
+  background: red;
+`
+render {
+  <MyHeader>
+    This is my styled header
+  </MyHeader>
+}
+```
+
+you will get rendered header like this:
+
+```html
+<header class="MyHeader-hkmgDS fuUxah">This is my styled header</header>
+```
+
+## Options
+
+### getDisplayName
+
+By default, `StyledComponentsPlugin` uses `bundleName` variable, but you can change it by using `getDisplayName` function:
+
+```js
+StyledComponentsPlugin({
+  getDisplayName: (filename, bindingName) => {
+    // typescript-plugin-styled-components gives path to a filename variable
+    // we change a path to a real filename in PascalCase
+    filename = filename.replace(/^.*[\\\/]/, '').match(/[a-z]+/gi).map(function (word) {
+        return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase()
+      }).join('').replace('Tsx', '').replace('Ts', '');
+    return filename + '_' + bindingName
+  }
+});
+```
+
+You can do whatever you like with filename or bindingName variables or return other string if you like. The result of previous `header.tsx` file would look like this:
+
+```html
+<header class="Header_MyHeader-hkmgDS fuUxah">This is my styled header</header>
+```
+
+`StyledComponentsPlugin` just passes options straight to the `typescript-plugin-styled-components` transformer as object and without any additional check. It will allow to use modified transformer in the future without changing `StyledComponentsPlugin`. For more how to use the `typescript-plugin-styled-components` transformer read [here](https://github.com/Igorbek/typescript-plugin-styled-components#options)
