feat(cfp): Updated for React 17 / CRA 4 / Webpack 5

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'

packages/create-freesewing-pattern/lib/cli.js

@@ -40,9 +40,9 @@ module.exports = async () => {
     .option('-m, --manager <npm|yarn>', 'package manager to use', /^(npm|yarn)$/, defaults.manager)
     .option('-v, --skip-version-check', 'proceed even with Node < v10')
     .option(
-      '-t, --template <default|custom>',
+      '-t, --template <freesewing|custom>',
       'package template to use',
-      /^(default|custom)$/,
+      /^(freesewing|custom)$/,
       defaults.template
     )
     .option('-p, --template-path <string>', '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
 }

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
 }
 

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 {

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,

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

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/**'