feat: css stream

_tests/css-stream.spec.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import {expect} from 'chai';
+import {renderToStaticNodeStream} from 'react-dom/server';
+
+import {getUsedStyles, createStyleStream} from "../src/streamers/cssStream";
+
+describe('css stream', () => {
+  it('simple map', () => {
+    const map = getUsedStyles(
+      `<div class="a"><div class="b c d"><div class=f></div></div>`,
+      {
+        a: [1],
+        b: [2],
+        d: [3],
+        e: [4],
+        f: [5, 6],
+      }
+    );
+    expect(map).to.deep.equal({
+      1: true,
+      2: true,
+      3: true,
+      5: true,
+      6: true,
+    })
+  });
+
+  it('React.renderToStream', async () => {
+    const styles = {};
+    const cssStream = createStyleStream({
+      a: ['file1'],
+      b: ['file1', 'file2'],
+      zz: ['file3'],
+      notused: ['file4']
+    }, style => {
+      styles[style] = (styles[style] || 0) + 1;
+    });
+    const output = renderToStaticNodeStream(
+      <div>
+        <div className="a">
+          <div className="a b c">
+            <div className="xx">
+            </div>
+          </div>
+          <div className="zz">
+          </div>
+        </div>
+      </div>
+    );
+
+    const streamString = async (readStream) => {
+      const result = [];
+      for await (const chunk of readStream) {
+        console.log('XX', chunk);
+        result.push(chunk);
+      }
+      return result.join('')
+    };
+
+    const [tr, base] = await Promise.all([
+      streamString(output.pipe(cssStream)),
+      streamString(output)
+    ]);
+
+    expect(base).to.be.equal(tr);
+    expect(styles).to.deep.equal({
+      file1: 1,
+      file2: 1,
+      file3: 1,
+    })
+  })
+});

_tests/utills.spec.js

@@ -1,9 +1,47 @@
 import React from 'react';
 import {expect} from 'chai';
 
-import {remapImports} from "../src/scanForImports";
+import {remapImports} from "../src/scanners/scanForImports";
+import {remapStyles} from "../src/scanners/scanForStyles";
 
 
+describe('scanForStyles', () => {
+  it('should map simple style', () => {
+    const styles = {};
+    remapStyles(
+      [
+        {file: 'a', content: '.a{}, .b .c{}, .d>.e:not(focused){}'},
+        {file: 'b', content: '.a {}, .f~.g{}'},
+      ],
+      styles
+    );
+    expect(styles).to.deep.equal({
+      "a": {
+        "a": true,
+        "b": true,
+      },
+      "b": {
+        "a": true,
+      },
+      "c": {
+        "a": true,
+      },
+      "d": {
+        "a": true,
+      },
+      "e": {
+        "a": true,
+      },
+      "f": {
+        "b": true
+      },
+      "g": {
+        "b": true
+      },
+    })
+  });
+});
+
 describe('scanForImports', () => {
   it('should map simple import', () => {
     const imports = {};
@@ -30,7 +68,10 @@ describe('scanForImports', () => {
   it('should map complex import', () => {
     const imports = {};
     remapImports(
-      [{file: 'a', content: 'blabla;import(/* webpack: "123" */"./a.js"); blabla; import(/* webpack: 123 */ \'./b.js\');'}],
+      [{
+        file: 'a',
+        content: 'blabla;import(/* webpack: "123" */"./a.js"); blabla; import(/* webpack: 123 */ \'./b.js\');'
+      }],
       '.', '.',
       (a, b) => a + b,
       imports
@@ -41,7 +82,10 @@ describe('scanForImports', () => {
   it('should remove webpackPrefetch and webpackPreload', () => {
     const imports = {};
     remapImports(
-      [{file: 'a', content: 'blabla;import(/* webpackPrefetch: true *//* webpack: "123" */"./a.js"); blabla; import(/* webpackPreload: true */ \'./b.js\');'}],
+      [{
+        file: 'a',
+        content: 'blabla;import(/* webpackPrefetch: true *//* webpack: "123" */"./a.js"); blabla; import(/* webpackPreload: true */ \'./b.js\');'
+      }],
       '.', '.',
       (a, b) => a + b,
       imports

bin/imported-components

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
 
-require('../dist/scanForImports');
+require('../dist/cjs/scanners/scanForImports');

bin/imported-components-css

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/cjs/scanners/scanForStyles');

examples/SSR/parcel-react-styled-components/.babelrc

@@ -0,0 +1,10 @@
+{
+  "env": {
+    "server": {
+      "plugins": ["react-imported-component/babel", "babel-plugin-dynamic-import-node"]
+    },
+    "client": {
+      "plugins": ["react-hot-loader/babel","react-imported-component/babel"]
+    }
+  }
+}

examples/SSR/parcel-react-styled-components/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+*.log
+.cache
+dist

examples/SSR/parcel-react-styled-components/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright © Benoit Tremblay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

examples/SSR/parcel-react-styled-components/app/App.jsx

@@ -0,0 +1,27 @@
+
+import {hot} from 'react-hot-loader';
+import React from 'react';
+import importedComponent from 'react-imported-component';
+
+import { Helmet } from 'react-helmet';
+import { Switch, Route, Redirect } from 'react-router-dom';
+
+import HelloWorld from './HelloWorld';
+
+const HelloWorld2 = importedComponent(() => import('./HelloWorld2'));
+
+export default hot(module)(function App() {
+  return (
+    <div>
+      <Helmet defaultTitle="Hello World!">
+        <meta charSet="utf-8" />
+      </Helmet>
+      App
+      <Switch>
+        <Route exact path="/" component={HelloWorld} />
+        <Route exact path="/codeSplit" component={HelloWorld2} />
+        <Redirect to="/" />
+      </Switch>
+    </div>
+  );
+})

examples/SSR/parcel-react-styled-components/app/HelloWorld.jsx

@@ -0,0 +1,16 @@
+// Dead simple component for the hello world (hi mom!)
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './HelloWorld.scss';
+
+export default function HelloWorld() {
+  return <div>
+    <h1 className="hello-world">Hello world</h1>
+    <p style={{ textAlign: 'center' }}>
+      This is an ordinary react component.
+      <br />
+      <Link to="/codeSplit">Click here</Link> to see a code-split component.
+    </p>
+  </div>;
+}

examples/SSR/parcel-react-styled-components/app/HelloWorld.scss

@@ -0,0 +1,13 @@
+// With Parcel, you have nothing to setup for SCSS, you just write!
+
+$primary-color: #0098da;
+
+body {
+  margin: 0;
+}
+
+.hello-world {
+  background: $primary-color;
+  color: white;
+  text-align: center;
+}

examples/SSR/parcel-react-styled-components/app/HelloWorld2.jsx

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import './codeSplitAssets/NyanCat.css';
+import Go from './codeSplitAssets/NyanCat.js';
+import importedComponent from "react-imported-component";
+
+const HelloWorld3 = importedComponent(() => import('./HelloWorld3'));
+
+export default class Nyan extends Component {
+
+    componentDidMount() {
+        Go();
+    }
+
+    render() {
+        return <div>
+            <h1 className="hello-world">Hello world 2!</h1>
+            <p style={{ textAlign: 'center' }}>
+                This is a code-split component.
+                <br />
+                <Link to="/">Click here</Link> to see an ordinary component.
+            </p>
+            <div className="wrapper">
+                <div className="rainbow">
+                    <span></span>
+                </div>
+                <div className="nyan-cat">
+                    <div className="feet"></div>
+                    <div className="tail">
+                        <span></span>
+                    </div>
+                    <div className="body"></div>
+                    <div className="head"></div>
+                </div>
+                <div className="stars">
+
+                </div>
+            </div>
+            and nested cat....
+            <HelloWorld3 />
+        </div>
+    }
+}

examples/SSR/parcel-react-styled-components/app/HelloWorld3.jsx

@@ -0,0 +1,33 @@
+import React, {Component} from 'react';
+import {Link} from 'react-router-dom';
+import './codeSplitAssets/NyanCat.css';
+import Go from './codeSplitAssets/NyanCat.js';
+
+export default class Nyan extends Component {
+
+  componentDidMount() {
+    Go();
+  }
+
+  render() {
+    return <div style={{position:'absolute',top:'500px'}}>
+      I am async cat
+      <div className="wrapper">
+        <div className="rainbow">
+          <span></span>
+        </div>
+        <div className="nyan-cat">
+          <div className="feet"></div>
+          <div className="tail">
+            <span></span>
+          </div>
+          <div className="body"></div>
+          <div className="head"></div>
+        </div>
+        <div className="stars">
+
+        </div>
+      </div>
+    </div>
+  }
+}

examples/SSR/parcel-react-styled-components/app/client.js

@@ -0,0 +1,45 @@
+// Entry point for the browser
+// Start your React application and add the required containers
+// Here we have <BrowserRouter /> for react-router
+
+import 'react-hot-loader';
+import {rehydrateMarks} from 'react-imported-component';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {BrowserRouter} from 'react-router-dom';
+import imp from './imp';
+
+import App from './App';
+
+const element = document.getElementById('app');
+const app = (
+  <BrowserRouter>
+    <App/>
+  </BrowserRouter>
+);
+
+const TM = 1000;
+
+console.log('waiting');
+setTimeout(function () {
+// rehydrate the bundle marks
+  console.log('loading');
+  rehydrateMarks().then(() => {
+    console.log('loaded...');
+    setTimeout(function () {
+      console.log('rendering');
+      // In production, we want to hydrate instead of render
+      // because of the server-rendering
+      if (1 || process.env.NODE_ENV === 'production') {
+        ReactDOM.hydrate(app, element);
+      } else {
+        ReactDOM.render(app, element);
+      }
+    }, TM);
+  });
+}, TM);
+
+// Hot reload is that easy with Parcel
+if (module.hot) {
+  module.hot.accept();
+}