@stylin/ts-loader - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const R = require("ramda");
+const Handlebars = require("handlebars");
 const path_1 = require("path");
@@ -8,6 +9,9 @@ const loader_utils_1 = require("loader-utils");
 const fs_1 = require("fs");
+const template = fs_1.readFileSync(path_1.join(__dirname, `template.hbs`), `utf8`);
+const toDTS = Handlebars.compile(template, { noEscape: true });
 const defOptions = {
-    propType: (name) => `${name}Props`
+    propsType: (name) => `${name}Props`,
+    styledPropsType: (name) => `Styled${name}Props`,
 };
-const filename = (path) => {
+const nameFile = (path) => {
     const dirName = path_1.dirname(path);
@@ -17,28 +21,23 @@ const baseName = path_1.basename(path);
 };
-const createInterface = ({ compName, tagName, type, typedProperty, typedVariable }) => `
-  export interface ${type} extends ComponentProps<'${tagName}'> {
-    ${typedProperty}
-    ${typedVariable}
-  }
-  export const ${compName}: FC<${type}>
-`;
+const toCamelCase = R.pipe(R.toLower, R.replace(/(^\w|[-_][a-z])/g, R.pipe(R.toUpper, R.replace(`-`, ``), R.replace(`_`, ``))));
 function loader(content, sourceMap, meta) {
     const onComplete = this.async();
-    const { propType } = R.merge(defOptions, loader_utils_1.getOptions(this));
-    const exports = meta.msa.map(({ tagName, compName, properties, variables }) => {
-        const type = propType(compName, this.resource);
-        const typedProperty = parser_1.typeProperty(properties);
-        const typedVariable = parser_1.typeVariable(variables);
-        return (typedProperty || typedVariable)
-            ? createInterface({ compName, tagName, type, typedProperty, typedVariable })
-            : `export const ${compName}: FC<ComponentProps<'${tagName}'>>`;
+    const { propsType, styledPropsType } = R.merge(defOptions, loader_utils_1.getOptions(this));
+    const exports = meta.msa.map(({ componentName, className, properties, tagName, variables }) => {
+        const parsedProperties = parser_1.parseProperty(properties);
+        const parsedVariables = parser_1.parseVariable(variables);
+        return {
+            className,
+            componentName,
+            isExtended: tagName && !!(parsedVariables || parsedVariables),
+            isStyled: !tagName,
+            properties: parsedProperties,
+            propsType: propsType(componentName, this.resource),
+            styledPropsType: styledPropsType(componentName || toCamelCase(className)),
+            tagName,
+            variables: parsedVariables,
+        };
     });
-    const result = `
-    import {FC, ComponentProps} from 'react'
-    ${exports.join(`\n`)}`
-        .replace(/^\s+/gm, ``)
-        .replace(/^\w+/gm, group => [`import`, `export`].includes(group) ? group : `  ${group}`);
-    fs_1.writeFile(filename(this.resource), result, error => {
-        error && this.emitWarning(error);
-    });
+    const isRestyled = exports.some(({ isStyled }) => isStyled);
+    fs_1.writeFile(nameFile(this.resource), toDTS({ isRestyled, exports }), error => error && this.emitWarning(error));
     onComplete(null, content, sourceMap, meta);
@@ -45,0 +44,0 @@ }

dist/parser.d.ts

@@ -1,2 +0,2 @@
-export declare const typeProperty: (x: Record<string | number, unknown>) => any;
-export declare const typeVariable: (x: Record<string | number, unknown>) => string;
+export declare const parseProperty: (x: Record<string | number, unknown>) => any;
+export declare const parseVariable: (x: Record<string | number, unknown>) => string;

dist/parser.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.typeVariable = exports.typeProperty = void 0;
+exports.parseVariable = exports.parseProperty = void 0;
 const R = require("ramda");
@@ -17,4 +17,4 @@ const isOptional = (value) => (value[`@isOptional`] || value[2] ? `?` : ``);
 const defineVariableType = R.pipe(R.head, value => isBoolean(value) || isNumber(value) || `string`);
-exports.typeProperty = R.compose(R.when(R.isEmpty, R.always(``)), R.join(`\n`), R.map(([key, value]) => `${key}${isOptional(value)}: ${definePropertyType(value)}`), R.toPairs);
-exports.typeVariable = R.compose(R.join(`\n`), R.map(([key, value]) => `${key}${isOptional(value)}: ${defineVariableType(value)}`), R.toPairs);
+exports.parseProperty = R.compose(R.when(R.isEmpty, R.always(``)), R.join(`\n`), R.map(([key, value]) => `${key}${isOptional(value)}: ${definePropertyType(value)}`), R.toPairs);
+exports.parseVariable = R.compose(R.join(`\n`), R.map(([key, value]) => `${key}${isOptional(value)}: ${defineVariableType(value)}`), R.toPairs);
 //# sourceMappingURL=parser.js.map

package.json

 {
   "name": "@stylin/ts-loader",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Stylin TypeScript typing loader module for webpack",
@@ -20,4 +20,5 @@ "license": "MIT",
     "build": "npm run clean && npm run compile",
-    "clean": "rm -rf ./dist",
-    "compile": "tsc",
+    "clean": "rm -rf ./dist && npm run copy-files",
+    "compile": "tsc -b",
+    "copy-files": "mkdir dist && cp ./src/*.hbs ./dist/",
     "lint": "eslint . --ext .tsx,.ts --fix",
@@ -28,2 +29,3 @@ "prepublishOnly": "npm run build",
   "devDependencies": {
+    "@types/node": "^14.14.31",
     "@types/ramda": "^0.27.38",
@@ -38,2 +40,3 @@ "@typescript-eslint/eslint-plugin": "^4.15.0",
   "dependencies": {
+    "handlebars": "^4.7.7",
     "ramda": "^0.27.1"
@@ -44,3 +47,3 @@ },
   },
-  "gitHead": "82824a380f9f5754974a579f9e8a07ba9f5ce9dd"
+  "gitHead": "226894fec336c3f532652ca9f9c62297e2a2d242"
 }

README.md

@@ -36,5 +36,6 @@ # @stylin/ts-loader
 ## Options
-You can customize the generated type name. By default, it is equal:
+You can customize the generated type names. By default, they are equal:
 ```js
- propType: (componentName: string) => `${componentName}Props`
+ propsType: (componentName: string) => `${componentName}Props`
+ styledPropsType: (componentName: string) => `Styled${componentName}Props`,
 ```
@@ -41,0 +42,0 @@ <br/>

No alert changes

Improved metrics

Total package byte prevSize

11212

15.48%

Number of package files

9

12.5%

Number of lines in readme file

70

1.45%

Worsened metrics

Dependency count

2

100%

Dev dependency count

8

14.29%

Lines of code

66

-1.49%

Dependency changes

• + Added

  handlebars@^4.7.7

• + Added

  handlebars@4.7.8
  (transitive)

• + Added

  minimist@1.2.8
  (transitive)

• + Added

  neo-async@2.6.2
  (transitive)

• + Added

  source-map@0.6.1
  (transitive)

• + Added

  uglify-js@3.19.3
  (transitive)

• + Added

  wordwrap@1.0.0
  (transitive)