fix: tests, idyll-document bug with new esbuild setup

packages/idyll-cli/src/node-config.js

@@ -25,4 +25,12 @@ module.exports = (paths, opts) => {
         return originalLoad.apply(Module, arguments);
     }
   };
+
+  if (opts.transformComponents) {
+    require('@babel/register')({
+      presets: ['@babel/env', '@babel/preset-react'],
+      babelrc: false,
+      only: isWindows ? undefined : transformFolders
+    });
+  }
 };

packages/idyll-cli/src/pipeline/compile-user-components.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const { readdir, writeFile } = fs.promises;
-const { ensureDir } = require('fs-extra');
+const { ensureDir, pathExists } = require('fs-extra');
 const path = require('path');
 const babel = require('@babel/core');
 
@@ -9,6 +9,10 @@ module.exports = async paths => {
   const tempComponentDir = path.join(paths.TMP_DIR, 'components');
   await ensureDir(tempComponentDir);
   for (const dir of paths.COMPONENT_DIRS) {
+    const hasPath = await pathExists(dir);
+    if (!hasPath) {
+      continue;
+    }
     const tempComponentSubdir = path.join(
       tempComponentDir,
       `${componentDirIndex}`

packages/idyll-cli/src/pipeline/parse.js

@@ -173,10 +173,10 @@ exports.getHTML = async (paths, ast, _components, datasets, template, opts) => {
   for (key of Object.keys(_components)) {
     // .forEach(key => {
     delete require.cache[require.resolve(_components[key])];
+
     try {
       components[key] = require(_components[key]);
     } catch (e) {
-      // console.log(e);
       try {
         components[key] = await import(_components[key]);
       } catch (er) {

packages/idyll-cli/test/basic-project/src/components/CapitalPascal.js

@@ -1,15 +1,11 @@
-const React = require('react');
+import React from 'react';
 
 class PascalComponent extends React.PureComponent {
   render() {
-    const {hasError, updateProps, idyll, ...props} = this.props;
+    const { hasError, updateProps, idyll, ...props } = this.props;
 
-    return (
-      <div {...props}>
-        This is a custom component
-      </div>
-    );
+    return <div {...props}>This is a custom component</div>;
   }
 }
 
-module.exports = PascalComponent;
+export default PascalComponent;

packages/idyll-cli/test/basic-project/src/components/custom-component.js

@@ -1,25 +1,17 @@
-const React = require('react');
+import React from 'react';
 
 class CustomComponent extends React.PureComponent {
   render() {
-    const {hasError, updateProps, idyll, ...props} = this.props;
-    return (
-      <div {...props}>
-        This is a custom component
-      </div>
-    );
+    const { hasError, updateProps, idyll, ...props } = this.props;
+    return <div {...props}>This is a custom component</div>;
   }
 }
 
-module.exports = CustomComponent;
+export default CustomComponent;
 
-module.exports.IndexedComponent = class extends React.PureComponent {
+CustomComponent.IndexedComponent = class extends React.PureComponent {
   render() {
-    const {hasError, updateProps, idyll, ...props} = this.props;
-    return (
-      <div {...props}>
-        This is another custom component
-      </div>
-    );
+    const { hasError, updateProps, idyll, ...props } = this.props;
+    return <div {...props}>This is another custom component</div>;
   }
 };

packages/idyll-cli/test/basic-project/src/components/functional-component.js

@@ -1,5 +1,5 @@
-const React = require('react');
+import React from 'react';
 
-module.exports = () => {
-  return <div>Let's put the fun back in functional!</div>
-}
+export default () => {
+  return <div>Let's put the fun back in functional!</div>;
+};

packages/idyll-cli/test/basic-project/src/components/functional-default-component.js

@@ -1,8 +1,9 @@
-const React = require('react');
+import React from 'react';
 
-export default () =>
+export default () => (
   <div>
     This is some text
     <button>And a button</button>
     Then some more text
   </div>
+);

packages/idyll-cli/test/basic-project/src/package.json

@@ -5,6 +5,7 @@
     "start": "idyll index.idl --watch --css styles.css --layout centered --theme github --spellcheck",
     "build": "idyll index.idl --layout centered --theme ./custom-theme.css --css styles.css"
   },
+  "type": "module",
   "idyll": {
     "alias": {
       "PackageJsonComponentTest": "CustomComponent"

packages/idyll-cli/test/custom-ast/src/components/CapitalPascal.js

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 class PascalComponent extends React.PureComponent {
   render() {
@@ -8,4 +8,4 @@ class PascalComponent extends React.PureComponent {
   }
 }
 
-module.exports = PascalComponent;
+export default PascalComponent;

packages/idyll-cli/test/custom-ast/src/components/custom-component.js

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 class CustomComponent extends React.PureComponent {
   render() {
@@ -7,11 +7,13 @@ class CustomComponent extends React.PureComponent {
   }
 }
 
-module.exports = CustomComponent;
+export default CustomComponent;
 
-module.exports.IndexedComponent = class extends React.PureComponent {
+class IndexedComponent extends React.PureComponent {
   render() {
     const { hasError, updateProps, idyll, ...props } = this.props;
     return <div {...props}>This is another custom component</div>;
   }
-};
+}
+
+export { IndexedComponent };

packages/idyll-cli/test/custom-ast/src/components/functional-component.js

@@ -1,5 +1,5 @@
-const React = require('react');
+import React from 'react';
 
-module.exports = () => {
+export default () => {
   return <div>Let's put the fun back in functional!</div>;
 };

packages/idyll-cli/test/custom-ast/src/components/functional-default-component.js

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 export default () => (
   <div>

packages/idyll-cli/test/custom-ast/src/package.json

@@ -5,6 +5,7 @@
     "start": "idyll index.idl --watch --css styles.css --layout centered --theme github --spellcheck",
     "build": "idyll index.idl --layout centered --theme ./custom-theme.css --css styles.css"
   },
+  "type": "module",
   "idyll": {
     "alias": {
       "PackageJsonComponentTest": "CustomComponent"

packages/idyll-cli/test/custom-ast/test.js

@@ -155,7 +155,6 @@ before(function(done) {
     css: join(PROJECT_DIR, 'styles.css'),
     googleFonts: ['Hanalei Fill'],
     favicon: 'static/favicon.ico',
-    transformComponents: true,
     compiler: {
       spellcheck: false
     },

packages/idyll-cli/test/env-options/outer-project/components/CapitalPascal.js

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 class PascalComponent extends React.PureComponent {
   render() {
@@ -8,4 +8,4 @@ class PascalComponent extends React.PureComponent {
   }
 }
 
-module.exports = PascalComponent;
+export default PascalComponent;

packages/idyll-cli/test/env-options/outer-project/components/custom-component.js

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 class CustomComponent extends React.PureComponent {
   render() {
@@ -7,9 +7,9 @@ class CustomComponent extends React.PureComponent {
   }
 }
 
-module.exports = CustomComponent;
+export default CustomComponent;
 
-module.exports.IndexedComponent = class extends React.PureComponent {
+CustomComponent.IndexedComponent = class extends React.PureComponent {
   render() {
     const { hasError, updateProps, idyll, ...props } = this.props;
     return <div {...props}>This is another custom component</div>;

packages/idyll-cli/test/env-options/outer-project/components/functional-component.js

@@ -1,5 +1,5 @@
-const React = require('react');
+import React from 'react';
 
-module.exports = () => {
+export default () => {
   return <div>Let's put the fun back in functional!</div>;
 };

packages/idyll-cli/test/env-options/outer-project/components/functional-default-component.js

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 export default () => (
   <div>

packages/idyll-cli/test/env-options/outer-project/package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "start": "idyll index.idl --watch --css styles.css --layout centered --theme github --spellcheck"
   },
+  "type": "module",
   "idyll": [
     [
       "default-env",

packages/idyll-cli/test/env-options/test.js

@@ -48,6 +48,7 @@ describe('env-options', function() {
       compileLibs: false,
       compiler: { spellcheck: false },
       components: join(PROJECT_DIR, 'components'),
+      compileUserComponents: true,
       css: join(PROJECT_DIR, 'styles.css'),
       datasets: join(PROJECT_DIR, 'data'),
       env: undefined,
@@ -98,6 +99,7 @@ describe('env-options', function() {
       compileLibs: false,
       compiler: { spellcheck: false },
       components: join(PROJECT_DIR, 'components'),
+      compileUserComponents: true,
       css: join(PROJECT_DIR, 'styles.css'),
       datasets: join(PROJECT_DIR, 'data'),
       env: 'my-env',

packages/idyll-cli/test/minified-project/src/components/CapitalPascal.js

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 class PascalComponent extends React.PureComponent {
   render() {
@@ -8,4 +8,4 @@ class PascalComponent extends React.PureComponent {
   }
 }
 
-module.exports = PascalComponent;
+export default PascalComponent;

packages/idyll-cli/test/minified-project/src/components/custom-component.js

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 class CustomComponent extends React.PureComponent {
   render() {
@@ -7,9 +7,9 @@ class CustomComponent extends React.PureComponent {
   }
 }
 
-module.exports = CustomComponent;
+export default CustomComponent;
 
-module.exports.IndexedComponent = class extends React.PureComponent {
+CustomComponent.IndexedComponent = class extends React.PureComponent {
   render() {
     const { hasError, updateProps, idyll, ...props } = this.props;
     return <div {...props}>This is another custom component</div>;

packages/idyll-cli/test/minified-project/src/components/functional-component.js

@@ -1,5 +1,5 @@
-const React = require('react');
+import React from 'react';
 
-module.exports = () => {
+export default () => {
   return <div>Let's put the fun back in functional!</div>;
 };

packages/idyll-cli/test/minified-project/src/components/functional-default-component.js

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 export default () => (
   <div>

packages/idyll-cli/test/minified-project/src/package.json

@@ -5,6 +5,7 @@
     "start": "idyll index.idl --watch --css styles.css --layout centered --theme github --spellcheck",
     "build": "idyll index.idl --layout centered --theme ./custom-theme.css --css styles.css"
   },
+  "type": "module",
   "idyll": {
     "alias": {
       "PackageJsonComponentTest": "CustomComponent"

packages/idyll-cli/test/missing-assets/src/package.json

@@ -1,6 +1,7 @@
 {
   "name": "missing-assets",
   "version": "1.0.0",
+  "type": "module",
   "scripts": {
     "start": "idyll index.idl --watch --template index.html --css styles.css --layout centered --theme github --spellcheck",
     "build": "idyll index.idl --template index.html --layout centered --theme ./custom-theme.css --css styles.css"

packages/idyll-cli/test/multiple-component-dirs/src/components-1/custom-component.js

@@ -1,25 +1,17 @@
-const React = require('react');
+import React from 'react';
 
 class CustomComponent extends React.PureComponent {
   render() {
-    const {hasError, updateProps, idyll, ...props} = this.props;
-    return (
-      <div {...props}>
-        This is a custom component
-      </div>
-    );
+    const { hasError, updateProps, idyll, ...props } = this.props;
+    return <div {...props}>This is a custom component</div>;
   }
 }
 
-module.exports = CustomComponent;
+export default CustomComponent;
 
-module.exports.IndexedComponent = class extends React.PureComponent {
+CustomComponent.IndexedComponent = class extends React.PureComponent {
   render() {
-    const {hasError, updateProps, idyll, ...props} = this.props;
-    return (
-      <div {...props}>
-        This is another custom component
-      </div>
-    );
+    const { hasError, updateProps, idyll, ...props } = this.props;
+    return <div {...props}>This is another custom component</div>;
   }
 };

packages/idyll-cli/test/multiple-component-dirs/src/components-1/functional-component.js

@@ -1,5 +1,5 @@
-const React = require('react');
+import React from 'react';
 
-module.exports = () => {
-  return <div>Let's put the fun back in functional!</div>
-}
+export default () => {
+  return <div>Let's put the fun back in functional!</div>;
+};

packages/idyll-cli/test/multiple-component-dirs/src/components-1/functional-default-component.js

@@ -1,8 +1,9 @@
-const React = require('react');
+import React from 'react';
 
-export default () =>
+export default () => (
   <div>
     This is some text
     <button>And a button</button>
     Then some more text
   </div>
+);

packages/idyll-cli/test/multiple-component-dirs/src/components-2/CapitalPascal.js

@@ -1,15 +1,11 @@
-const React = require('react');
+import React from 'react';
 
 class PascalComponent extends React.PureComponent {
   render() {
-    const {hasError, updateProps, idyll, ...props} = this.props;
+    const { hasError, updateProps, idyll, ...props } = this.props;
 
-    return (
-      <div {...props}>
-        This is a custom component
-      </div>
-    );
+    return <div {...props}>This is a custom component</div>;
   }
 }
 
-module.exports = PascalComponent;
+export default PascalComponent;