-
Notifications
You must be signed in to change notification settings - Fork 67
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Import with param-case package name instead of PascalCase component name #28
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,9 +6,12 @@ import findUp from 'find-up'; | |
import * as fs from 'fs-extra'; | ||
import * as path from 'path'; | ||
import chalk from 'chalk'; | ||
import { pascalCase as toPascalCase } from 'pascal-case'; | ||
import { | ||
pascalCase as toPascalCase, | ||
paramCase as toParamCase, | ||
} from 'change-case'; | ||
import resolveAsBin from 'resolve-as-bin'; | ||
import generate from './generateComponentImports'; | ||
import generateComponentImports from './generateComponentImports'; | ||
|
||
// Makes the script crash on unhandled rejections instead of silently | ||
// ignoring them. In the future, promise rejections that are not handled will | ||
|
@@ -186,7 +189,10 @@ function app(name: string) { | |
function widget(name: string) { | ||
const modularRoot = getModularRoot(); | ||
|
||
const newWidgetPath = path.join(modularRoot, 'widgets', name); | ||
const newWidgetPackageName = toParamCase(name); | ||
const newWidgetComponentName = toPascalCase(name); | ||
|
||
const newWidgetPath = path.join(modularRoot, 'widgets', newWidgetPackageName); | ||
const templatePath = path.join(__dirname, '..', 'template'); | ||
|
||
// create a new widget source folder | ||
|
@@ -210,7 +216,8 @@ function widget(name: string) { | |
filePath, | ||
fs | ||
.readFileSync(filePath, 'utf8') | ||
.replace(/Component\$\$/g, toPascalCase(name)), | ||
.replace(/PackageName\$\$/g, newWidgetPackageName) | ||
.replace(/ComponentName\$\$/g, newWidgetComponentName), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Basically, it's no longer |
||
); | ||
} | ||
|
||
|
@@ -226,7 +233,7 @@ function widget(name: string) { | |
function map(modularRoot = getModularRoot()) { | ||
fs.writeFileSync( | ||
path.join(modularRoot, 'app/src/widgets.js'), | ||
generate(path.join(modularRoot, 'widgets')), | ||
generateComponentImports(path.join(modularRoot, 'widgets')), | ||
); | ||
} | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,39 @@ | ||
import * as fs from 'fs-extra'; | ||
import { pascalCase as toPascalCase } from 'pascal-case'; | ||
import * as path from 'path'; | ||
|
||
// given a path, generate a map like { name: () => import(name) } | ||
export default function scriptContent(dirPath: string): string { | ||
const dirs = fs | ||
.readdirSync(dirPath, { withFileTypes: true }) | ||
.filter((entry) => entry.isDirectory()); | ||
interface PackageJson { | ||
name: string; | ||
private?: boolean; | ||
} | ||
|
||
// Given a directory of widgets, generate a map like: | ||
// { 'package-name': lazy(() => import('package-name')) } | ||
export default function generateComponentImports( | ||
widgetsDirectoryPath: string, | ||
): string { | ||
const packageNames = fs | ||
.readdirSync(widgetsDirectoryPath, { withFileTypes: true }) | ||
// Get individual widget directories. | ||
.filter((entry) => entry.isDirectory()) | ||
// Get widget `package.json`s. | ||
.map( | ||
(dir) => | ||
fs.readJSONSync( | ||
path.join(widgetsDirectoryPath, dir.name, 'package.json'), | ||
) as PackageJson, | ||
) | ||
// Remove widgets which are marked as private (and therefore are not published yet.) | ||
.filter((packageJson) => packageJson.private !== true) | ||
// Get package names. | ||
.map((packageJson) => packageJson.name); | ||
|
||
// todo - read from meta.json inside these folders and filter out those which aren't ready to be published yet | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I decided to use There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good idea, let's do this. |
||
return `// DO NOT EDIT THIS FILE. | ||
${dirs.length > 0 ? `import {lazy} from 'react';` : ''} | ||
${packageNames.length > 0 ? `import { lazy } from 'react';` : ''} | ||
|
||
export default { | ||
${dirs | ||
${packageNames | ||
.map( | ||
(dir) => | ||
`'${toPascalCase(dir.name)}': lazy(() => import('${toPascalCase( | ||
dir.name, | ||
)}'))`, | ||
(packageName) => `'${packageName}': lazy(() => import('${packageName}'))`, | ||
) | ||
.join(',\n ')} | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
import React from 'react'; | ||
|
||
export default function Component$$() { | ||
return <div>This is Component$$</div>; | ||
export default function ComponentName$$() { | ||
return <div>This is ComponentName$$</div>; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
{ | ||
"name": "Component$$", | ||
"name": "PackageName$$", | ||
"version": "1.0.0", | ||
"main": "index.js", | ||
"license": "MIT", | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
pros: a single import; cons: more dependencies than necessary.
I could explicitly install each case if that's preferred?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
since it's just used once, and I doubt its code will change, I would literally copy paste the implementations of those two functions (and license) into the bottom of cli.ts. But, your call.