create-stylable-app - npm Package Compare versions

Comparing version 4.12.0 to 4.13.0

dist/create-project.js

@@ -90,3 +90,8 @@ "use strict";
     const progressDotInterval = verbose ? 0 : 5000;
-    await (0, helpers_1.executeWithProgress)(`# Fetching latest .gitignore from GitHub.`, () => (0, helpers_1.spawnSafe)('npx', ['gitignore', 'node'], spawnOptions), progressDotInterval);
+    await (0, helpers_1.executeWithProgress)(`# Fetching latest .gitignore from GitHub.`, async () => {
+        await (0, helpers_1.spawnSafe)('npx', ['gitignore', 'node'], spawnOptions);
+        const gitIgnorePath = path_1.default.join(targetDirectoryPath, '.gitignore');
+        const gitIgnoreContent = await fs_1.promises.readFile(gitIgnorePath, { encoding: 'utf8' });
+        return fs_1.promises.writeFile(gitIgnorePath, `${gitIgnoreContent}\n# Stylable dts files\nst-types`);
+    }, progressDotInterval);
     if (dependencies === null || dependencies === void 0 ? void 0 : dependencies.length) {
@@ -93,0 +98,0 @@ await (0, helpers_1.executeWithProgress)(`# Installing dependencies.`, () => (0, helpers_1.spawnSafe)('npm', ['install', ...dependencies], spawnOptions), progressDotInterval);

package.json

 {
   "name": "create-stylable-app",
-  "version": "4.12.0",
+  "version": "4.13.0",
   "description": "Quickly create a Stylable application",
@@ -14,3 +14,3 @@ "main": "dist/index.js",
     "validate-npm-package-name": "^4.0.0",
-    "yargs": "^17.4.0"
+    "yargs": "^17.4.1"
   },
@@ -17,0 +17,0 @@ "files": [

src/create-project.ts

@@ -111,3 +111,13 @@ import path from 'path';
         `# Fetching latest .gitignore from GitHub.`,
-        () => spawnSafe('npx', ['gitignore', 'node'], spawnOptions),
+        async () => {
+            await spawnSafe('npx', ['gitignore', 'node'], spawnOptions);
+
+            const gitIgnorePath = path.join(targetDirectoryPath, '.gitignore');
+            const gitIgnoreContent = await promises.readFile(gitIgnorePath, { encoding: 'utf8' });
+
+            return promises.writeFile(
+                gitIgnorePath,
+                `${gitIgnoreContent}\n# Stylable dts files\nst-types`
+            );
+        },
         progressDotInterval
@@ -114,0 +124,0 @@ );

template/ts-react-rollup/README.md

@@ -15,3 +15,3 @@ # Stylable App
 
-`npm run typecheck` - Verify syntactic/semantic correctness. Uses [typescript](https://github.com/microsoft/TypeScript).
+`npm run typecheck` - Verify syntactic/semantic correctness. Uses [typescript](https://github.com/microsoft/TypeScript). To read more about Stylable integration with typescript check out [our documentation](https://stylable.io/docs/getting-started/typescript-integration).
 
@@ -18,0 +18,0 @@ `npm run lint` - Verify best practices and find common issues. Uses [eslint](https://github.com/eslint/eslint).

template/ts-react-rollup/template.js

@@ -0,1 +1,2 @@
+//@ts-check
 /** @type {import('create-stylable-app').TemplateDefinition} */
@@ -12,2 +13,3 @@ module.exports = {
         '@stylable/core',
+        '@stylable/cli',
         '@stylable/rollup-plugin',
@@ -46,2 +48,3 @@ '@stylable/runtime',
     },
+    postinstall: [['npm', 'run', 'build']],
 };

template/ts-react-rollup/tsconfig.json

@@ -50,5 +50,5 @@ {
     // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
+    "rootDirs": ["./src", "./st-types"],            /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                             /* List of folders to include type definitions from. */
-    "types": ["react/next", "react-dom/next"],      /* Type declaration files to be included in compilation. */
+    "types": [],      /* Type declaration files to be included in compilation. */
     // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
@@ -55,0 +55,0 @@ "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

template/ts-react-rollup/typings/globals.d.ts

@@ -1,8 +0,1 @@
-declare module '*.st.css' {
-    export * from '@stylable/runtime/stylesheet';
-
-    const defaultExport: unknown;
-    export default defaultExport;
-}
-
 declare module '*.png' {
@@ -9,0 +2,0 @@ const urlToFile: string;

template/ts-react-webpack-lean/README.md

@@ -17,6 +17,6 @@ # Stylable App
 
-`npm run typecheck` - Verify syntactic/semantic correctness. Uses [typescript](https://github.com/microsoft/TypeScript).
+`npm run typecheck` - Verify syntactic/semantic correctness. Uses [typescript](https://github.com/microsoft/TypeScript). To read more about Stylable integration with typescript check out [our documentation](https://stylable.io/docs/getting-started/typescript-integration).
 
 `npm run lint` - Verify best practices and find common issues. Uses [eslint](https://github.com/eslint/eslint).
 
-`npm test` - Execute `typecheck` and `lint` scripts.
+`npm test` - Execute `typecheck` and `lint` scripts.

template/ts-react-webpack-lean/template.js

@@ -0,1 +1,2 @@
+//@ts-check
 /** @type {import('create-stylable-app').TemplateDefinition} */
@@ -6,2 +7,3 @@ module.exports = {
         '@stylable/core',
+        '@stylable/cli',
         '@stylable/runtime',
@@ -42,2 +44,3 @@ '@stylable/webpack-plugin',
     },
+    postinstall: [['npm', 'run', 'build']],
 };

template/ts-react-webpack-lean/tsconfig.json

@@ -50,5 +50,5 @@ {
     // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
+    "rootDirs": ["./src", "./st-types"],            /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                             /* List of folders to include type definitions from. */
-    "types": ["react/next", "react-dom/next"],      /* Type declaration files to be included in compilation. */
+    "types": [],      /* Type declaration files to be included in compilation. */
     // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
@@ -55,0 +55,0 @@ "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

template/ts-react-webpack-lean/typings/globals.d.ts

@@ -1,8 +0,1 @@
-declare module '*.st.css' {
-    export * from '@stylable/runtime/stylesheet';
-
-    const defaultExport: unknown;
-    export default defaultExport;
-}
-
 declare module '*.png' {
@@ -9,0 +2,0 @@ const urlToFile: string;

template/ts-react-webpack-lean/webpack.config.js

@@ -26,4 +26,7 @@ const { StylableWebpackPlugin } = require('@stylable/webpack-plugin');
     },
-    plugins: [new StylableWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Stylable App' })],
+    plugins: [
+        new StylableWebpackPlugin({ stcConfig: true }),
+        new HtmlWebpackPlugin({ title: 'Stylable App' }),
+    ],
     cache: { type: 'filesystem' },
 };

template/ts-react-webpack/README.md

@@ -17,3 +17,3 @@ # Stylable App
 
-`npm run typecheck` - Verify syntactic/semantic correctness. Uses [typescript](https://github.com/microsoft/TypeScript).
+`npm run typecheck` - Verify syntactic/semantic correctness. Uses [typescript](https://github.com/microsoft/TypeScript). To read more about Stylable integration with typescript check out [our documentation](https://stylable.io/docs/getting-started/typescript-integration).
 
@@ -20,0 +20,0 @@ `npm run lint` - Verify best practices and find common issues. Uses [eslint](https://github.com/eslint/eslint).

template/ts-react-webpack/template.js

@@ -0,1 +1,2 @@
+//@ts-check
 /** @type {import('create-stylable-app').TemplateDefinition} */
@@ -6,2 +7,3 @@ module.exports = {
         '@stylable/core',
+        '@stylable/cli',
         '@stylable/runtime',
@@ -42,2 +44,3 @@ '@stylable/webpack-plugin',
     },
+    postinstall: [['npm', 'run', 'build']],
 };

template/ts-react-webpack/tsconfig.json

@@ -50,5 +50,5 @@ {
     // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
+    "rootDirs": ["./src", "./st-types"],            /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                             /* List of folders to include type definitions from. */
-    "types": ["react/next", "react-dom/next"],      /* Type declaration files to be included in compilation. */
+    "types": [],      /* Type declaration files to be included in compilation. */
     // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
@@ -55,0 +55,0 @@ "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

template/ts-react-webpack/typings/globals.d.ts

@@ -1,8 +0,1 @@
-declare module '*.st.css' {
-    export * from '@stylable/runtime/stylesheet';
-
-    const defaultExport: unknown;
-    export default defaultExport;
-}
-
 declare module '*.png' {
@@ -9,0 +2,0 @@ const urlToFile: string;

template/ts-react-webpack/webpack.config.js

@@ -26,4 +26,7 @@ const { StylableWebpackPlugin } = require('@stylable/webpack-plugin');
     },
-    plugins: [new StylableWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Stylable App' })],
+    plugins: [
+        new StylableWebpackPlugin({ stcConfig: true }),
+        new HtmlWebpackPlugin({ title: 'Stylable App' }),
+    ],
     cache: { type: 'filesystem' },
 };

No alert changes

Improved metrics

Total package byte prevSize

85022

2.34%

Number of package files

72

4.35%

Lines of code

1312

3.39%

Dependency changes

• Updated

  yargs@^17.4.1