@stylin/ts-loader
Advanced tools
Comparing version
"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 @@ } |
@@ -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; |
"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 |
{ | ||
"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" | ||
} |
@@ -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/> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
11212
15.48%9
12.5%70
1.45%2
100%8
14.29%66
-1.49%+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added