diff --git a/changelog.md b/changelog.md index 5353304..13917e8 100644 --- a/changelog.md +++ b/changelog.md @@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.4.0] - 30-04-2019 +### Added +- Support for Sass using variable maps and reference functions +- Added Generator prompt to use Sass or CSS + ## [1.3.1] - 17-04-2019 ### Bug Fixes - Fixed issue with typos diff --git a/package.json b/package.json index dfab3bb..e572495 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "stencil-storybook-wrapper", - "version": "1.3.1", + "version": "1.4.0", "description": "A node module to update a stencil and storybook/html project to make it compatible", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", diff --git a/readme.md b/readme.md index 267f78d..b805e78 100644 --- a/readme.md +++ b/readme.md @@ -1,7 +1,7 @@ # Stencil Storybook Wrapper This module provides a wrapper to interoperate stencil created app with storybook. -It works by hooking into the stencil dev server during development, listenig to the websocket during HMR(Hot Module Replacement) and showing the errors or reloading the stencil generated resources. +It works by hooking into the stencil dev server during development, listening to the websocket during HMR(Hot Module Replacement) and showing the errors or reloading the stencil generated resources. During production builds for storybook, the output of the stencil build is moved to the `storybook-static` folder and resources requests updated so that the storybook can be deployed. @@ -13,7 +13,9 @@ Using this with a stencil project already modifed by you could lead to un-necess ---- ## Prerequisites -Create a stencil project of the type __*component*__ using the [getting started docs](https://stenciljs.com/docs/getting-started#starting-a-new-project). +Create a stencil project of the type __*component*__ using the [getting started docs](https://stenciljs.com/docs/getting-started#starting-a-new-project**. + +**Note: If using Sass you will also need [stencil sass](https://www.npmjs.com/package/@stencil/sass) installed.** ## Installation @@ -109,4 +111,4 @@ The wrapper adds a dev server config object to the `package.json` file. You can Please raise any issues you have while using this wrapper. Any help would also be appreciated. -### **More updates to come...** \ No newline at end of file +### **More updates to come...** diff --git a/source/plop/templates/component/component.scss b/source/plop/templates/component/component.scss new file mode 100644 index 0000000..eb75997 --- /dev/null +++ b/source/plop/templates/component/component.scss @@ -0,0 +1,19 @@ +// TemplateComponent Variable Map +$template-component-vars: ( + color: red +); + +// TemplateComponent CSS Variable Reference +@function template-component-var($name) { + @return var(--template-component-#{$name}); +} + +.template-component { + // Convert Sass Variable Map to CSS Variables + @each $key, $value in $template-component-vars { + --template-component-#{$key}: #{$value}; + } + + // TemplateComponent Styles + color: template-component-var(color); +} diff --git a/source/plop/templates/component/component.tsx b/source/plop/templates/component/component.tsx index e3b0628..1569bfc 100644 --- a/source/plop/templates/component/component.tsx +++ b/source/plop/templates/component/component.tsx @@ -12,6 +12,6 @@ export class TemplateComponent { @Prop() test: string = 'Hello World'; render() { - return
{this.test}
; + return (
{this.test}
); } } diff --git a/source/plopfile.stencil.js b/source/plopfile.stencil.js index 3fb2d67..f2236be 100644 --- a/source/plopfile.stencil.js +++ b/source/plopfile.stencil.js @@ -1,75 +1,120 @@ module.exports = function(plop) { - // create your generators here - plop.setGenerator('Component', { - description: 'Create a stencil JS component', - // array of inquirer prompts - prompts: [ - { - type: 'input', - name: 'name', - message: 'Component Name', - }, - ], - // array of actions - actions: [ - // Add all the template files to the dest folder - { - type: 'add', - path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.tsx', - templateFile: 'plop/templates/component/component.tsx', - }, - { - type: 'add', - path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.css', - templateFile: 'plop/templates/component/component.css', - }, - { - type: 'add', - path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.e2e.ts', - templateFile: 'plop/templates/component/component.e2e.ts', - }, - { - type: 'add', - path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.stories.js', - templateFile: 'plop/templates/component/component.stories.js', - }, - // Update all the tempates files with the data - { - type: 'modify', - path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.tsx', - pattern: /template-component/g, - template: '\{{kebabCase name}}', - }, - { - type: 'modify', - path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.tsx', - pattern: /TemplateComponent/g, - template: '\{{pascalCase name}}', - }, - { - type: 'modify', - path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.e2e.ts', - pattern: /template-component/g, - template: '\{{kebabCase name}}', - }, - { - type: 'modify', - path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.css', - pattern: /template-component/g, - template: '\{{kebabCase name}}', - }, - { - type: 'modify', - path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.stories.js', - pattern: /TemplateComponent/g, - template: '\{{pascalCase name}}', - }, - { - type: 'modify', - path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.stories.js', - pattern: /template-component/g, - template: '\{{kebabCase name}}', - }, - ], - }); + // create your generators here + plop.setGenerator('Component', { + description: 'Create a stencil JS component', + // array of inquirer prompts + prompts: [ + { + type: 'input', + name: 'name', + message: 'Component Name', + }, + { + type: 'confirm', + name: 'wantSass', + message: 'Do you want to use Sass instead of CSS?' + } + ], + // array of actions + actions: function(data) { + let actions = [ + { + type: 'add', + path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.tsx', + templateFile: 'plop/templates/component/component.tsx', + }, + { + type: 'add', + path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.e2e.ts', + templateFile: 'plop/templates/component/component.e2e.ts', + }, + { + type: 'add', + path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.stories.js', + templateFile: 'plop/templates/component/component.stories.js', + } + ]; + + // modifers + + let modifierActions = [ + { + type: 'modify', + path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.tsx', + pattern: /template-component/g, + template: '\{{kebabCase name}}', + }, + { + type: 'modify', + path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.tsx', + pattern: /TemplateComponent/g, + template: '\{{pascalCase name}}', + }, + { + type: 'modify', + path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.e2e.ts', + pattern: /template-component/g, + template: '\{{kebabCase name}}', + }, + { + type: 'modify', + path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.stories.js', + pattern: /TemplateComponent/g, + template: '\{{pascalCase name}}', + }, + { + type: 'modify', + path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.stories.js', + pattern: /template-component/g, + template: '\{{kebabCase name}}', + } + ]; + + if (data.wantSass) { + actions.push( + { + type: 'add', + path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.scss', + templateFile: 'plop/templates/component/component.scss', + }, + { + type: 'modify', + path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.scss', + pattern: /template-component/g, + template: '\{{kebabCase name}}', + }, + { + type: 'modify', + path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.scss', + pattern: /TemplateComponent/g, + template: '\{{pascalCase name}}', + }, + { + type: 'modify', + path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.tsx', + pattern: /template-component.css/g, + template: '\{{kebabCase name}}.scss', + }, + ); + } else { + actions.push( + { + type: 'add', + path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.css', + templateFile: 'plop/templates/component/component.css', + }, + { + type: 'modify', + path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.css', + pattern: /template-component/g, + template: '\{{kebabCase name}}', + } + ); + } + + actions = actions.concat(modifierActions); + + return actions; + } + }); };