From 380fa33c6a0242eedfc13a73993239c61f536d27 Mon Sep 17 00:00:00 2001 From: Joost De Cock Date: Sat, 22 May 2021 17:58:52 +0200 Subject: [PATCH] feat(cfp): Updated for React 17 / CRA 4 / Webpack 5 --- config/dependencies.yaml | 2 +- packages/create-freesewing-pattern/lib/cli.js | 16 ++++++---------- .../lib/create-library.js | 10 ++++++++++ .../lib/get-default-library-params.js | 2 +- .../lib/prompt-library-params.js | 4 ++-- .../template/freesewing/example/src/App.js | 11 ++++++++++- .../template/freesewing/rollup.config.js | 8 ++++---- 7 files changed, 34 insertions(+), 19 deletions(-) diff --git a/config/dependencies.yaml b/config/dependencies.yaml index 63c6773fa96..21c2630983a 100644 --- a/config/dependencies.yaml +++ b/config/dependencies.yaml @@ -121,7 +121,7 @@ create-freesewing-pattern: 'make-dir': '^3.1.0' 'normalize-path': '^3.0.0' 'ora': '^5.4.0' - 'p-each-series': '^3.0.0' + 'p-each-series': '^2.2.0' 'parse-git-config': '^3.0.0' 'validate-npm-package-name': '^3.0.0' 'which': '^2.0.2' diff --git a/packages/create-freesewing-pattern/lib/cli.js b/packages/create-freesewing-pattern/lib/cli.js index a962dec50cb..14a0964f192 100644 --- a/packages/create-freesewing-pattern/lib/cli.js +++ b/packages/create-freesewing-pattern/lib/cli.js @@ -40,9 +40,9 @@ module.exports = async () => { .option('-m, --manager ', 'package manager to use', /^(npm|yarn)$/, defaults.manager) .option('-v, --skip-version-check', 'proceed even with Node < v10') .option( - '-t, --template ', + '-t, --template ', 'package template to use', - /^(default|custom)$/, + /^(freesewing|custom)$/, defaults.template ) .option('-p, --template-path ', 'custom package template path') @@ -84,22 +84,18 @@ module.exports = async () => { ${strings[params.language]['cfp.runTheseCommands']}: - - ${strings[params.language]['cfp.startRollup']} - - 👉 ${chalk.cyan(`cd ${params.shortName} && ${params.manager} start`)} - - - ${strings[params.language]['cfp.startWebpack']} - 👉 ${chalk.cyan(`cd ${path.join(params.shortName, 'example')} && ${params.manager} start`)} +${strings[params.language]['cfp.startWebpack']} ${strings[params.language]['cfp.devDocsAvailableAt']} ${chalk.bold('https://freesewing.dev/')} ${strings[params.language]['cfp.talkToUs']} - ${chalk.bold('https://chat.freesewing.org/')} + ${chalk.bold('https://discord.freesewing.org/')} -`) +` + ) return dest } diff --git a/packages/create-freesewing-pattern/lib/create-library.js b/packages/create-freesewing-pattern/lib/create-library.js index 29dc9705033..05c819c9166 100644 --- a/packages/create-freesewing-pattern/lib/create-library.js +++ b/packages/create-freesewing-pattern/lib/create-library.js @@ -59,6 +59,16 @@ module.exports = async (info) => { await promise } + // Symlink is required since webback 5 / CRA 4 + fs.symlinkSync( + path.join(dest), + path.join(dest, 'example', 'src', 'pattern'), + 'junction', + (err) => { + if (err) console.log('Unable to create symlink to pattern folder:', err) + } + ) + return dest } diff --git a/packages/create-freesewing-pattern/lib/get-default-library-params.js b/packages/create-freesewing-pattern/lib/get-default-library-params.js index fe139dd45e3..8ac2d602dd8 100644 --- a/packages/create-freesewing-pattern/lib/get-default-library-params.js +++ b/packages/create-freesewing-pattern/lib/get-default-library-params.js @@ -15,7 +15,7 @@ module.exports = async () => { repo: info => `${info.author}/${info.name}`, license: config.get("license", "MIT"), manager: config.get("manager", "npm"), - template: config.get("template", "default") + template: config.get("template", "freesewing") }; try { diff --git a/packages/create-freesewing-pattern/lib/prompt-library-params.js b/packages/create-freesewing-pattern/lib/prompt-library-params.js index 656038a0f0d..715f23c4587 100644 --- a/packages/create-freesewing-pattern/lib/prompt-library-params.js +++ b/packages/create-freesewing-pattern/lib/prompt-library-params.js @@ -134,9 +134,9 @@ module.exports = async opts => { config.set('author', info.author) config.set('manager', info.manager) - config.set('template', 'default') + config.set('template', 'freesewing') config.set('license', 'MIT') - info.template = 'default' + info.template = 'freesewing' return { ...info, diff --git a/packages/create-freesewing-pattern/template/freesewing/example/src/App.js b/packages/create-freesewing-pattern/template/freesewing/example/src/App.js index bff800ec505..deeaab3eb18 100644 --- a/packages/create-freesewing-pattern/template/freesewing/example/src/App.js +++ b/packages/create-freesewing-pattern/template/freesewing/example/src/App.js @@ -2,8 +2,17 @@ import React from 'react' import freesewing from '@freesewing/core' import Workbench from '@freesewing/components/Workbench' import '@freesewing/css-theme' +import Pattern from './pattern/src/index.js' +/* + * The following symlink is required to make this import work: + * `root_folder/example/src/pattern => `../../` + * + * Without it, we can't import the pattern as a local file + * since create-react-app does not allow imports outside ./src + * If it's imported as a dependency, webpack will cache the + * build and there will be no hot-relaoding of changes + */ -import Pattern from 'pattern' const App = (props) => { // You can use this to add transations diff --git a/packages/create-freesewing-pattern/template/freesewing/rollup.config.js b/packages/create-freesewing-pattern/template/freesewing/rollup.config.js index 12daa00ef4f..95f81f0a005 100644 --- a/packages/create-freesewing-pattern/template/freesewing/rollup.config.js +++ b/packages/create-freesewing-pattern/template/freesewing/rollup.config.js @@ -5,7 +5,7 @@ import commonjs from '@rollup/plugin-commonjs' import json from '@rollup/plugin-json' import { terser } from 'rollup-plugin-terser' import peerDepsExternal from 'rollup-plugin-peer-deps-external' -import postcss from 'rollup-plugin-postcss' +//import postcss from 'rollup-plugin-postcss' import { name, version, description, author, license } from './package.json' import pkg from './package.json' @@ -28,9 +28,9 @@ export default { ], plugins: [ peerDepsExternal(), - postcss({ - modules: true - }), + //postcss({ + // modules: true + //}), url({ exclude: ['**/*.svg'] }), babel({ exclude: 'node_modules/**'