@storybook/cli 6.5.0-alpha.5 → 6.5.0-alpha.50

package/dist/cjs/frameworks/react/ts/Page.tsx

@@ -3,65 +3,71 @@ import React from 'react';
 import { Header } from './Header';
 import './page.css';
 
-interface PageProps {
-  user?: {};
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
-}
+type User = {
+  name: string;
+};
 
-export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => (
-  <article>
-    <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
+export const Page: React.VFC = () => {
+  const [user, setUser] = React.useState<User>();
 
-    <section>
-      <h2>Pages in Storybook</h2>
-      <p>
-        We recommend building UIs with a{' '}
-        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
-          <strong>component-driven</strong>
-        </a>{' '}
-        process starting with atomic components and ending with pages.
-      </p>
-      <p>
-        Render pages with mock data. This makes it easy to build and review page states without
-        needing to navigate to them in your app. Here are some handy patterns for managing page data
-        in Storybook:
-      </p>
-      <ul>
-        <li>
-          Use a higher-level connected component. Storybook helps you compose such data from the
-          "args" of child component stories
-        </li>
-        <li>
-          Assemble data in the page component from your services. You can mock these services out
-          using Storybook.
-        </li>
-      </ul>
-      <p>
-        Get a guided tutorial on component-driven development at{' '}
-        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
-          Storybook tutorials
-        </a>
-        . Read more in the{' '}
-        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
-          docs
-        </a>
-        .
-      </p>
-      <div className="tip-wrapper">
-        <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
-        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-              id="a"
-              fill="#999"
-            />
-          </g>
-        </svg>
-        Viewports addon in the toolbar
-      </div>
-    </section>
-  </article>
-);
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <section>
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+            <strong>component-driven</strong>
+          </a>{' '}
+          process starting with atomic components and ending with pages.
+        </p>
+        <p>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </p>
+        <ul>
+          <li>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </li>
+          <li>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </li>
+        </ul>
+        <p>
+          Get a guided tutorial on component-driven development at{' '}
+          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+            Storybook tutorials
+          </a>
+          . Read more in the{' '}
+          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+            docs
+          </a>
+          .
+        </p>
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                id="a"
+                fill="#999"
+              />
+            </g>
+          </svg>
+          Viewports addon in the toolbar
+        </div>
+      </section>
+    </article>
+  );
+};

package/dist/cjs/frameworks/svelte/Button.stories.js

@@ -0,0 +1,51 @@
+import Button from './Button.svelte';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+// More on argTypes: https://storybook.js.org/docs/svelte/api/argtypes
+export default {
+  title: 'Example/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    label: { control: 'text' },
+    onClick: { action: 'onClick' },
+    primary: { control: 'boolean' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args
+const Template = (args) => ({
+  Component: Button,
+  props: args,
+  on: {
+    click: args.onClick,
+  },
+});
+
+// More on args: https://storybook.js.org/docs/svelte/writing-stories/args
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Button',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Button',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Button',
+};

package/dist/cjs/frameworks/svelte/Header.stories.js

@@ -0,0 +1,29 @@
+import Header from './Header.svelte';
+
+export default {
+  title: 'Example/Header',
+  component: Header,
+  argTypes: {
+    onLogin: { action: 'onLogin' },
+    onLogout: { action: 'onLogout' },
+    onCreateAccount: { action: 'onCreateAccount' },
+  },
+};
+
+const Template = (args) => ({
+  Component: Header,
+  props: args,
+  on: {
+    login: args.onLogin,
+    logout: args.onLogout,
+    createAccount: args.onCreateAccount,
+  },
+});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {},
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};

package/dist/cjs/frameworks/svelte/Page.stories.js

@@ -0,0 +1,29 @@
+import Page from './Page.svelte';
+
+export default {
+  title: 'Example/Page',
+  component: Page,
+  argTypes: {
+    onLogin: { action: 'onLogin' },
+    onLogout: { action: 'onLogout' },
+    onCreateAccount: { action: 'onCreateAccount' },
+  },
+};
+
+const Template = (args) => ({
+  Component: Page,
+  props: args,
+  on: {
+    login: args.onLogin,
+    logout: args.onLogout,
+    createAccount: args.onCreateAccount,
+  },
+});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {},
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};

package/dist/cjs/frameworks/web-components/js/Page.js

@@ -43,8 +43,8 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html`
         <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
         .
       </p>
-      <div className="tip-wrapper">
-        <span className="tip">Tip</span> Adjust the width of the canvas with the
+      <div class="tip-wrapper">
+        <span class="tip">Tip</span> Adjust the width of the canvas with the
         <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
             <path

package/dist/cjs/frameworks/web-components/ts/Page.ts

@@ -50,8 +50,8 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) =>
         <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
         .
       </p>
-      <div className="tip-wrapper">
-        <span className="tip">Tip</span> Adjust the width of the canvas with the
+      <div class="tip-wrapper">
+        <span class="tip">Tip</span> Adjust the width of the canvas with the
         <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
             <path

package/dist/cjs/generators/ANGULAR/angular-helpers.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getAngularAppTsConfigPath = getAngularAppTsConfigPath;
-exports.getAngularAppTsConfigJson = getAngularAppTsConfigJson;
 exports.editStorybookTsConfig = editStorybookTsConfig;
-exports.isDefaultProjectSet = isDefaultProjectSet;
+exports.getAngularAppTsConfigJson = getAngularAppTsConfigJson;
+exports.getAngularAppTsConfigPath = getAngularAppTsConfigPath;
 exports.getBaseTsConfigName = getBaseTsConfigName;
+exports.isDefaultProjectSet = isDefaultProjectSet;
 
 require("core-js/modules/es.promise.js");
 
@@ -19,9 +19,9 @@ var _fsExtra = require("fs-extra");
 
 var _helpers = require("../../helpers");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function getAngularAppTsConfigPath() {
   const angularJson = (0, _helpers.readFileAsJson)('angular.json', true);

package/dist/cjs/generators/ANGULAR/index.js

@@ -56,7 +56,7 @@ const generator = async (packageManager, npmOptions, options) => {
     builder: _project_types.CoreBuilder.Webpack5
   }) : options;
   (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, updatedOptions, 'angular', {
-    extraPackages: ['@compodoc/compodoc', '@angular/elements', '@webcomponents/custom-elements'],
+    extraPackages: ['@compodoc/compodoc'],
     addScripts: false
   });
   (0, _helpers.copyTemplate)(__dirname);

package/dist/cjs/generators/ANGULAR/template-csf/.storybook/tsconfig.json

@@ -1,9 +1,21 @@
 {
   "extends": "%SET_DURING_SB_INIT%",
   "compilerOptions": {
-    "types": ["node"]
+    "types": [
+      "node"
+    ],
+    "allowSyntheticDefaultImports": true
   },
-  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"],
-  "include": ["../src/**/*", "../projects/**/*"],
-  "files": ["./typings.d.ts"]
-}
+  "exclude": [
+    "../src/test.ts",
+    "../src/**/*.spec.ts",
+    "../projects/**/*.spec.ts"
+  ],
+  "include": [
+    "../src/**/*",
+    "../projects/**/*"
+  ],
+  "files": [
+    "./typings.d.ts"
+  ]
+}

package/dist/cjs/generators/AURELIA/template-csf/.storybook/tsconfig.json

@@ -1,9 +1,20 @@
 {
   "extends": "%SET_DURING_SB_INIT%",
   "compilerOptions": {
-    "types": ["node"]
+    "types": [
+      "node"
+    ]
   },
-  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"],
-  "include": ["../src/**/*", "../projects/**/*"],
-  "files": ["./typings.d.ts"]
-}
+  "exclude": [
+    "../src/test.ts",
+    "../src/**/*.spec.ts",
+    "../projects/**/*.spec.ts"
+  ],
+  "include": [
+    "../src/**/*",
+    "../projects/**/*"
+  ],
+  "files": [
+    "./typings.d.ts"
+  ]
+}

package/dist/cjs/generators/REACT_SCRIPTS/index.js

@@ -44,7 +44,15 @@ const generator = async (packageManager, npmOptions, options) => {
   }) : options; // `@storybook/preset-create-react-app` has `@storybook/node-logger` as peerDep
 
   const extraPackages = ['@storybook/node-logger'];
-  if (isCra5) extraPackages.push('webpack'); // preset v3 is compat with older versions of CRA, otherwise let version float
+
+  if (isCra5) {
+    extraPackages.push('webpack'); // Miscellaneous dependency used in `babel-preset-react-app` but not listed as dep there
+
+    extraPackages.push('babel-plugin-named-exports-order'); // Miscellaneous dependency to add to be sure Storybook + CRA is working fine with Yarn PnP mode
+
+    extraPackages.push('prop-types');
+  } // preset v3 is compat with older versions of CRA, otherwise let version float
+
 
   const extraAddons = [`@storybook/preset-create-react-app${isCra5 ? '' : '@3'}`];
   await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, updatedOptions, 'react', {

package/dist/cjs/generators/SVELTE/index.js

@@ -53,7 +53,6 @@ const generator = async (packageManager, npmOptions, options) => {
 
   await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'svelte', {
     extraPackages: ['svelte', 'svelte-loader'],
-    extraAddons: ['@storybook/addon-svelte-csf'],
     extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'],
     extraMain,
     commonJs

package/dist/cjs/generators/WEB-COMPONENTS/index.js

@@ -10,7 +10,9 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  return (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'web-components');
+  return (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'web-components', {
+    extraPackages: ['lit-html']
+  });
 };
 
 var _default = generator;

package/dist/cjs/generators/baseGenerator.js

@@ -51,6 +51,8 @@ const builderDependencies = builder => {
 
 const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
 
+const hasInteractiveStories = framework => ['react', 'angular'].includes(framework);
+
 async function baseGenerator(packageManager, npmOptions, {
   language,
   builder
@@ -71,7 +73,13 @@ async function baseGenerator(packageManager, npmOptions, {
   const addons = ['@storybook/addon-links', '@storybook/addon-essentials']; // added to package.json
 
   const addonPackages = [...addons, '@storybook/addon-actions'];
-  const yarn2Dependencies = packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react'] : [];
+
+  if (hasInteractiveStories(framework)) {
+    addons.push('@storybook/addon-interactions');
+    addonPackages.push('@storybook/addon-interactions', '@storybook/testing-library');
+  }
+
+  const yarn2Dependencies = packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react@1.x.x'] : [];
   const files = await _fsExtra.default.readdir(process.cwd());
   const isNewFolder = !files.some(fname => fname.startsWith('.babel') || fname.startsWith('babel') || fname === 'package.json');
   const packageJson = packageManager.retrievePackageJson();

package/dist/cjs/generators/configure.js

@@ -9,6 +9,8 @@ var _fsExtra = _interopRequireDefault(require("fs-extra"));
 
 var _tsDedent = _interopRequireDefault(require("ts-dedent"));
 
+const _excluded = ["addons", "extensions", "commonJs"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -19,7 +21,7 @@ function configureMain(_ref) {
     extensions = ['js', 'jsx', 'ts', 'tsx'],
     commonJs = false
   } = _ref,
-      custom = _objectWithoutPropertiesLoose(_ref, ["addons", "extensions", "commonJs"]);
+      custom = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const prefix = _fsExtra.default.existsSync('./src') ? '../src' : '../stories';
   const config = Object.assign({

package/dist/cjs/helpers.js

@@ -3,16 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getBowerJson = getBowerJson;
-exports.readFileAsJson = readFileAsJson;
-exports.paddedLog = paddedLog;
-exports.getChars = getChars;
-exports.codeLog = codeLog;
-exports.getBabelDependencies = getBabelDependencies;
 exports.addToDevDependenciesIfNotPresent = addToDevDependenciesIfNotPresent;
-exports.copyTemplate = copyTemplate;
+exports.codeLog = codeLog;
+exports.commandLog = void 0;
 exports.copyComponents = copyComponents;
-exports.commandLog = exports.writeFileAsJson = void 0;
+exports.copyTemplate = copyTemplate;
+exports.getBabelDependencies = getBabelDependencies;
+exports.getBowerJson = getBowerJson;
+exports.getChars = getChars;
+exports.paddedLog = paddedLog;
+exports.readFileAsJson = readFileAsJson;
+exports.writeFileAsJson = void 0;
 
 require("core-js/modules/es.promise.js");
 

package/dist/cjs/initiate.js

@@ -7,6 +7,8 @@ exports.initiate = initiate;
 
 require("core-js/modules/es.promise.js");
 
+require("core-js/modules/es.array.sort.js");
+
 var _updateNotifier = require("update-notifier");
 
 var _chalk = _interopRequireDefault(require("chalk"));
@@ -280,11 +282,12 @@ async function initiate(options, pkg) {
   } catch (ex) {
     done(ex.message);
     process.exit(1);
+    return;
   }
 
   done();
   await installStorybook(projectType, Object.assign({}, options, isEsm ? {
     commonJs: true
   } : undefined));
-  return (0, _automigrate.automigrate)();
+  await (0, _automigrate.automigrate)();
 }

package/dist/cjs/js-package-manager/JsPackageManager.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPackageDetails = getPackageDetails;
 exports.JsPackageManager = void 0;
+exports.getPackageDetails = getPackageDetails;
 
 require("core-js/modules/es.promise.js");
 
@@ -18,7 +18,7 @@ var _helpers = require("../helpers");
 
 var _PackageJsonHelper = require("./PackageJsonHelper");
 
-var _versions = _interopRequireDefault(require("../versions.json"));
+var _versions = _interopRequireDefault(require("../versions"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/dist/cjs/project_types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.installableProjectTypes = exports.unsupportedTemplate = exports.supportedTemplates = exports.SupportedLanguage = exports.CoreBuilder = exports.SUPPORTED_FRAMEWORKS = exports.ProjectType = void 0;
+exports.unsupportedTemplate = exports.supportedTemplates = exports.installableProjectTypes = exports.SupportedLanguage = exports.SUPPORTED_FRAMEWORKS = exports.ProjectType = exports.CoreBuilder = void 0;
 
 var _semver = require("@storybook/semver");
 

package/dist/cjs/repro-generators/configs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.svelte = exports.sfcVue = exports.preact = exports.html = exports.vue3 = exports.vue = exports.web_components_lit2 = exports.web_components_typescript = exports.web_components = exports.angular = exports.angular12 = exports.angular11 = exports.angular10 = exports.react_in_yarn_workspace = exports.webpack_react = exports.react_typescript = exports.react = exports.cra_typescript = exports.cra = void 0;
+exports.webpack_react = exports.web_components_typescript = exports.web_components_lit2 = exports.web_components = exports.vue3 = exports.vue = exports.svelte = exports.sfcVue = exports.react_typescript = exports.react_in_yarn_workspace = exports.react = exports.preact = exports.html = exports.cra_typescript = exports.cra = exports.angular130 = exports.angular13 = exports.angular12 = exports.angular11 = exports.angular10 = exports.angular = void 0;
 
 const fromDeps = (...args) => ['mkdir {{appName}}', 'cd {{appName}}', // Create `yarn.lock` to force Yarn to consider adding deps in this directory
 // and not look for a yarn workspace in parent directory
@@ -14,16 +14,16 @@ const cra = {
   framework: 'react',
   name: 'cra',
   version: 'latest',
-  generator: [// Force npm otherwise we have a mess between Yarn 1 and Yarn 2
-  'npx create-react-app@{{version}} {{appName}} --use-npm', 'cd {{appName}}', 'echo "FAST_REFRESH=true" > .env', 'echo "SKIP_PREFLIGHT_CHECK=true" > .env'].join(' && ')
+  generator: [// Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM
+  'npm_config_user_agent=npm npx -p create-react-app@{{version}} create-react-app {{appName}}', 'cd {{appName}}', 'echo "FAST_REFRESH=true" > .env', 'echo "SKIP_PREFLIGHT_CHECK=true" > .env'].join(' && ')
 };
 exports.cra = cra;
 const cra_typescript = {
   framework: 'react',
   name: 'cra_typescript',
   version: 'latest',
-  generator: [// Force npm otherwise we have a mess between Yarn 1 and Yarn 2
-  'npx create-react-app@{{version}} {{appName}} --template typescript --use-npm'].join(' && ')
+  generator: [// Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM
+  'npm_config_user_agent=npm npx -p create-react-app@{{version}} create-react-app {{appName}} --template typescript'].join(' && ')
 };
 exports.cra_typescript = cra_typescript;
 const react = {
@@ -62,7 +62,7 @@ const baseAngular = {
   framework: 'angular',
   name: 'angular',
   version: 'latest',
-  generator: `npx --package @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skipInstall=true --strict`
+  generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skipInstall=true --strict`
 };
 const angular10 = Object.assign({}, baseAngular, {
   name: 'angular10',
@@ -79,6 +79,16 @@ const angular12 = Object.assign({}, baseAngular, {
   version: 'v12-lts'
 });
 exports.angular12 = angular12;
+const angular130 = Object.assign({}, baseAngular, {
+  name: 'angular130',
+  version: '13.0.x'
+});
+exports.angular130 = angular130;
+const angular13 = Object.assign({}, baseAngular, {
+  name: 'angular13',
+  version: '13.1.x'
+});
+exports.angular13 = angular13;
 const angular = baseAngular; // #endregion
 // #region  web components
 
@@ -107,7 +117,8 @@ exports.web_components_lit2 = web_components_lit2;
 const vue = {
   framework: 'vue',
   name: 'vue',
-  version: 'latest',
+  // Be careful here, the latest versions of vue cli are bootstrapping a vue 3  project
+  version: '4',
   generator: [// Force npm otherwise we have a mess between Yarn 1 and Yarn 2
   `npx -p @vue/cli@{{version}} vue create {{appName}} --default --packageManager=npm --no-git --force`].join(' && ')
 };
@@ -141,7 +152,8 @@ const sfcVue = {
   framework: 'vue',
   name: 'sfcVue',
   version: 'latest',
-  generator: fromDeps('vue', 'vue-loader', 'vue-template-compiler', 'webpack@webpack-4')
+  //
+  generator: fromDeps('vue@2.6', 'vue-loader@15.9', 'vue-template-compiler@2.6', 'webpack@webpack-4')
 };
 exports.sfcVue = sfcVue;
 const svelte = {