feat(packages/sui-studio): Add new param to use explicit import

SUI-Components · Sep 1, 2022 · 816fc6b · 816fc6b
1 parent 9c066a0
commit 816fc6b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 15 deletions.
diff --git a/packages/sui-studio/README.md b/packages/sui-studio/README.md
@@ -46,6 +46,14 @@ Use `-C path` or `--context path` parameter to generate the component with a giv
 $ npx sui-studio generate house window -C ./myCustomContext.js
 ```
 
+#### Explicit import
+
+Use `-E` or `--explicit` parameter to generate a component in a file with its same name and an index re-export.
+
+```sh
+$ npx sui-studio generate house window -E
+```
+
 ### Use new compiler
 
 We're migrating to `swc` so you could generate the new component with the expected `prepare` field by using the flag `--swc` or `-W`.

diff --git a/packages/sui-studio/bin/sui-studio-generate.js b/packages/sui-studio/bin/sui-studio-generate.js
@@ -17,6 +17,7 @@ program
   .option('-P, --prefix <prefix>', 'add prefix for this component')
   .option('-S, --scope <scope>', 'add scope for this component')
   .option('-W, --swc', 'Use the new SWC compiler', false)
+  .option('-E, --explicit', 'Use explicit import', false)
   .on('--help', () => {
     console.log('  Examples:')
     console.log('')
@@ -52,6 +53,7 @@ const componentInPascal = toPascalCase(
 const COMPONENT_DIR = `/components/${category}/${component}/`
 const COMPONENT_PATH = `${BASE_DIR}${COMPONENT_DIR}`
 const COMPONENT_ENTRY_JS_POINT_FILE = `${COMPONENT_PATH}src/index.js`
+const COMPONENT_JS_POINT_FILE = `${COMPONENT_PATH}src/${componentInPascal}.js`
 const COMPONENT_PACKAGE_JSON_FILE = `${COMPONENT_PATH}package.json`
 const COMPONENT_PACKAGE_GITIGNORE_FILE = `${COMPONENT_PATH}.gitignore`
 const COMPONENT_PACKAGE_NPMIGNORE_FILE = `${COMPONENT_PATH}.npmignore`
@@ -66,7 +68,7 @@ const COMPONENT_CONTEXT_FILE = `${DEMO_DIR}context.js`
 const TEST_DIR = `${COMPONENT_PATH}/test/`
 const COMPONENT_TEST_FILE = `${TEST_DIR}index.test.js`
 
-const {context, scope, prefix = 'sui', swc} = program.opts()
+const {context, scope, prefix = 'sui', swc, explicit} = program.opts()
 const packageScope = scope ? `@${scope}/` : ''
 const packageCategory = category ? `${toKebabCase(category)}-` : ''
 const packageName = `${packageScope}${prefix}-${packageCategory}${toKebabCase(
@@ -139,6 +141,25 @@ describe${context ? '.context.default' : ''}('${componentInPascal}', ${
 })
 `
 
+const componentTemplate = `// import PropTypes from 'prop-types'
+
+export default function ${componentInPascal}() {
+  return (
+    <div className="${prefix}-${componentInPascal}">
+      <h1>${componentInPascal}</h1>
+    </div>
+  )
+}
+
+${componentInPascal}.displayName = '${componentInPascal}'
+${componentInPascal}.propTypes = {}
+`
+
+const explicitImportTemplate = `import ${componentInPascal} from './${componentInPascal}.js'
+
+export default ${componentInPascal}
+`
+
 const defaultContext = `module.exports = {
   default: {
     i18n: {
@@ -225,21 +246,11 @@ test
 
   writeFile(
     COMPONENT_ENTRY_JS_POINT_FILE,
-    `// import PropTypes from 'prop-types'
-
-export default function ${componentInPascal}() {
-  return (
-    <div className="${prefix}-${componentInPascal}">
-      <h1>${componentInPascal}</h1>
-    </div>
-  )
-}
-
-${componentInPascal}.displayName = '${componentInPascal}'
-${componentInPascal}.propTypes = {}
-`
+    explicit ? explicitImportTemplate : componentTemplate
   ),
 
+  explicit && writeFile(COMPONENT_JS_POINT_FILE, componentTemplate),
+
   writeFile(
     COMPONENT_ENTRY_SCSS_POINT_FILE,
     `@import '~@s-ui/theme/lib/index';
@@ -296,7 +307,7 @@ export default () => <${componentInPascal} />
   ),
 
   context &&
-    (function () {
+    (function() {
       const isBooleanContext = typeof context === 'boolean'
 
       writeFile(