@ng-atomic/schematics 1.2.1 → 1.5.0

package/collection.json

@@ -1,6 +1,12 @@
 {
   "extends": ["@schematics/angular"],
   "schematics": {
+    "style-header": {
+      "aliases": ["sh"],
+      "description": "Add style header",
+      "factory": "./src/style-header/index",
+      "schema": "./src/style-header/schema.json"
+    },
     "atomic-component": {
       "aliases": ["ac"],
       "description": "Create an atomic component",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-atomic/schematics",
-  "version": "1.2.1",
+  "version": "1.5.0",
   "schematics": "./collection.json",
   "ng-add": {
     "save": "devDependencies"
@@ -8,6 +8,7 @@
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "dependencies": {
+    "@angular/core": "^11.2.0",
     "string-template": "^1.0.0"
   },
   "peerDependencies": {}

package/src/_utilities/save-file.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@angular-devkit/schematics';
+export declare function saveFile(host: Tree, path: string, callback: (str: string) => string): Tree;

package/src/_utilities/save-file.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveFile = void 0;
+function saveFile(host, path, callback) {
+    host.exists(path)
+        ? host.overwrite(path, callback(host.read(path).toString('utf-8')))
+        : host.create(path, callback(''));
+    return host;
+}
+exports.saveFile = saveFile;
+//# sourceMappingURL=save-file.js.map

package/src/_utilities/save-file.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"save-file.js","sourceRoot":"","sources":["../../../../../libs/schematics/src/_utilities/save-file.ts"],"names":[],"mappings":";;;AAEA,SAAgB,QAAQ,CAAC,IAAU,EAAE,IAAY,EAAE,QAAiC;IACnF,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QAChB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;QACpE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACnC,OAAO,IAAI,CAAC;AACb,CAAC;AALD,4BAKC"}

package/src/atomic-component/_test/example.atom.scss

@@ -0,0 +1,6 @@
+@use 'scoped-var' as * with ($host: 'example');
+@use 'atomic/atom' as *;
+
+:host {
+  @include atom($host);
+}

package/src/atomic-component/_test/{example.atom.ts.expected → example.atom.ts}

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'atoms-example',
   templateUrl: './example.atom.html',
-  styleUrls: ['./example.atom.scss']
+  styleUrls: ['./example.atom.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ExampleAtom implements OnInit {
 

package/src/atomic-component/files/__name@dasherize__/__name@dasherize__.stories.ts.template

@@ -0,0 +1,26 @@
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Meta, Story } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { <%= classify(name) %><%= classify(type) %>, <%= classify(name) %>Module } from '.';
+
+export default {
+  title: '<%= classify(type) %>s/<%= classify(name) %>',
+  component: <%= classify(name) %><%= classify(type) %>,
+} as Meta;
+
+const ACTIONS = {
+  // eventEmitterName: action('eventEmitterName'),
+};
+
+
+const Template: Story = (args) => ({
+  props: {...args, ...ACTIONS},
+  moduleMetadata: {
+    imports: [
+      <%= classify(name) %>Module,
+    ]
+  }
+});
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/atomic-component/files/__name@dasherize__/index.ts.template

@@ -1 +1,2 @@
+export { <%= classify(name) %><%= classify(type) %> } from './<%= dasherize(name) %>.<%= dasherize(type) %>';
 export { <%= classify(name) %>Module } from './<%= dasherize(name) %>.module';

package/src/atomic-component/files/__name@dasherize__/ng-package.json.template

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/components",
+  "lib": {
+    "entryFile": "index.ts",
+    "styleIncludePaths": [
+      "../../../../node_modules",
+      "../../styles"
+    ]
+  }
+}

package/src/atomic-component/index.js

@@ -12,13 +12,13 @@ exports.atomicComponent = (options) => (host, _) => tslib_1.__awaiter(void 0, vo
     (_a = options.prefix) !== null && _a !== void 0 ? _a : (options.prefix = 'extras');
     options.path = path_1.join(yield workspace_1.createDefaultPath(host, options.project), (_b = options === null || options === void 0 ? void 0 : options.path) !== null && _b !== void 0 ? _b : '');
     const { name, path, type } = options = Object.assign(Object.assign({}, options), parse_name_1.parseName(options.path, options.name));
-    delete options.styleHeader;
+    const componentExt = options.useTypeAsExtension ? type : 'component';
+    const scssPath = `${path}/${name}/${name}.${componentExt}.scss`;
     return schematics_1.chain([
         schematics_1.externalSchematic('@schematics/angular', 'module', { name, path, project: options.project }),
-        schematics_1.externalSchematic('@schematics/angular', 'component', Object.assign(Object.assign({}, options), { export: true })),
-        // externalSchematic('angular-host-css-variable', 'component', {...options, styleHeader: format(options.styleHeader, { name, type }), export: true}),
-        schematics_1.mergeWith(schematics_1.apply(schematics_1.url('./files'), [schematics_1.applyTemplates(Object.assign(Object.assign({}, strings), { name })), schematics_1.move(path)])),
-        addExportIntoIndexTs(Object.assign({}, options))
+        schematics_1.externalSchematic('@schematics/angular', 'component', Object.assign(Object.assign({}, options), { type: componentExt, export: true })),
+        schematics_1.schematic('style-header', Object.assign(Object.assign({}, options), { name, type, path: scssPath })),
+        schematics_1.mergeWith(schematics_1.apply(schematics_1.url('./files'), [schematics_1.applyTemplates(Object.assign(Object.assign({}, strings), { name, type: type !== null && type !== void 0 ? type : 'component' })), schematics_1.move(path)])),
     ]);
 });
 exports.atom = (options) => exports.atomicComponent(buildOptions(options, 'atom'));

package/src/atomic-component/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/schematics/src/atomic-component/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/schematics/src/atomic-component/index.ts"],"names":[],"mappings":"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"}

package/src/atomic-component/index.spec.ts

@@ -31,6 +31,7 @@ describe('AtomicComponent Schematics', () => {
       expect(files).toContain('/projects/app/src/app/_shared/components/example/example.component.scss');
       expect(files).toContain('/projects/app/src/app/_shared/components/example/example.component.spec.ts');
       expect(files).toContain('/projects/app/src/app/_shared/components/example/example.component.ts');
+      expect(files).toContain('/projects/app/src/app/_shared/components/example/example.stories.ts');
       expect(files).toContain('/projects/app/src/app/_shared/components/example/index.ts');
     });
   
@@ -44,6 +45,7 @@ describe('AtomicComponent Schematics', () => {
       expect(files).toContain('/projects/app/src/app/_shared/components/first/first.component.scss');
       expect(files).toContain('/projects/app/src/app/_shared/components/first/first.component.spec.ts');
       expect(files).toContain('/projects/app/src/app/_shared/components/first/first.component.ts');
+      expect(files).toContain('/projects/app/src/app/_shared/components/first/first.stories.ts');
       expect(files).toContain('/projects/app/src/app/_shared/components/first/index.ts');
 
       expect(files).toContain('/projects/app/src/app/_shared/components/second/second.module.ts');
@@ -51,10 +53,11 @@ describe('AtomicComponent Schematics', () => {
       expect(files).toContain('/projects/app/src/app/_shared/components/second/second.component.scss');
       expect(files).toContain('/projects/app/src/app/_shared/components/second/second.component.spec.ts');
       expect(files).toContain('/projects/app/src/app/_shared/components/second/second.component.ts');
+      expect(files).toContain('/projects/app/src/app/_shared/components/second/second.stories.ts');
       expect(files).toContain('/projects/app/src/app/_shared/components/second/index.ts');
   
-      const source = tree.read('/projects/app/src/app/_shared/components/index.ts')!.toString('utf-8');
-      expect(source).toEqual(`export { FirstModule } from './first';\nexport { SecondModule } from './second';`);
+      // const source = tree.read('/projects/app/src/app/_shared/components/index.ts')!.toString('utf-8');
+      // expect(source).toEqual(`export { FirstModule } from './first';\nexport { SecondModule } from './second';`);
     });
   
     it('should create atomic components files in app2', async () => {
@@ -63,7 +66,28 @@ describe('AtomicComponent Schematics', () => {
       const expectedFilePaths = buildExpectedFilePaths(options.name, 'example', projectPath, 'component');
   
       const { files } = await runner.runSchematicAsync('atomic-component', options, tree).toPromise();
-      expectedFilePaths.forEach(path => expect(files.includes(path)).toBeTruthy());
+      expectedFilePaths.forEach(path => expect(files).toContain(path));
+    });
+
+    describe('given useTypeAsExtension is false', () => {
+      it('should output `example.component.ts`', async () => {
+        const options = {project: 'app2', name: '_shared/components/example', type: 'dialog', useTypeAsExtension: false};
+        const projectPath = getTestProjectPath(defaultWorkspaceOptions, {...defaultAppOptions, name: 'app2'});
+        const expectedFilePaths = buildExpectedFilePaths(options.name, 'example', projectPath, 'component');
+    
+        tree = await runner.runSchematicAsync('atomic-component', options, tree).toPromise();
+        expectedFilePaths.forEach(path => expect(tree.files).toContain(path));
+
+        const inputScss = tree.read('/projects/app2/src/app/_shared/components/example/example.component.scss').toString('utf-8');
+        expect(inputScss.replace(/\s/g, '')).toEqual(`
+          @use 'scoped-var' as * with ($host: 'example');
+          @use 'atomic/dialog' as *;
+
+          :host {
+            @include dialog($host);
+          }
+        `.replace(/\s/g, ''));
+      });
     });
   });
 
@@ -72,7 +96,7 @@ describe('AtomicComponent Schematics', () => {
       tree = await createNxWorkspace(runner, tree);
     });
 
-    it('', async () => {
+    xit('', async () => {
       const options = {project: 'app', name: '_shared/components/extras/example'};
       // const options = {project: 'app', path: '_shared/components/extras', name: 'example'};
       const { files } = await runner.runSchematicAsync('atomic-component', options, tree).toPromise();
@@ -98,9 +122,13 @@ describe('Atom Schematics', () => {
     const host = await runner.runSchematicAsync('atom', options, tree).toPromise();
     expectedFilePaths.forEach(path => expect(host.files.includes(path)).toBeTruthy());
 
-    const input = host.read('/projects/app/src/app/_shared/components/example/example.atom.ts').toString('utf-8');
-    const expected = readFileSync(join(__dirname, '_test/example.atom.ts.expected')).toString();
-    expect(input.replace(/\s/g, '')).toEqual(expected.replace(/\s/g, ''));
+    const inputTs = host.read('/projects/app/src/app/_shared/components/example/example.atom.ts').toString('utf-8');
+    const expectedTs = readFileSync(join(__dirname, '_test/example.atom.ts')).toString();
+    expect(inputTs.replace(/\s/g, '')).toEqual(expectedTs.replace(/\s/g, ''));
+
+    const inputScss = host.read('/projects/app/src/app/_shared/components/example/example.atom.scss').toString('utf-8');
+    const expectedScss = readFileSync(join(__dirname, '_test/example.atom.scss')).toString();
+    expect(inputScss.replace(/\s/g, '')).toEqual(expectedScss.replace(/\s/g, ''));
   });
 });
 

package/src/atomic-component/schema.d.ts

@@ -17,4 +17,5 @@ export interface Schema {
     module?: string;
     export?: boolean;
     styleHeader?: string;
+    useTypeAsExtension: boolean;
 }

package/src/atomic-component/schema.json

@@ -51,7 +51,7 @@
       "description": "The change detection strategy to use in the new component.",
       "enum": ["Default", "OnPush"],
       "type": "string",
-      "default": "Default",
+      "default": "OnPush",
       "alias": "c"
     },
     "prefix": {
@@ -122,9 +122,14 @@
     },
 		"styleHeader": {
 			"type": "string",
-			"default": "@import 'host-variable';\n@import 'atomic/{type}';\n$host: host('{name}');\n\n:host {\n\t@include {type}($host);\n}\n",
-			"description": ""
-		}
+			"default": "@use 'scoped-var' as * with ($host: '{name}');\n@use 'atomic/{type}' as *;\n:host {\n\t@include {type}($host);\n}\n",
+			"description": "scss header template. you can use template engine like `($host: '{name}.{type}'`. "
+		},
+    "useTypeAsExtension": {
+      "type": "boolean",
+      "default": true,
+      "description": "When false, atomic component extension should be `.component.ts`"
+    }
   },
   "required": [
     "name"

package/src/ng-add/index.js

@@ -10,15 +10,11 @@ function default_1(options) {
         if (angularDependencyVersion === '0.0.0-NG') {
             throw new Error('@angular/core version is not supported.');
         }
-        // 必要なパッケージの追加
-        _utilities_1.addPackageToPackageJson(host, 'angular-atomic-schematics', getCustomWebpackVersion(angularDependencyVersion), 'devDependencies');
-        _utilities_1.addPackageToPackageJson(host, 'angular-host-css-variable', getCustomWebpackVersion(angularDependencyVersion), 'devDependencies');
-        _utilities_1.addPackageToPackageJson(host, 'angular-custom-webpack-chaining', getCustomWebpackVersion(angularDependencyVersion), 'devDependencies');
+        _utilities_1.addPackageToPackageJson(host, '@ng-atomic/schematics', '1.4.0', 'devDependencies');
+        _utilities_1.addPackageToPackageJson(host, 'scoped-var', '1.2.0', 'devDependencies');
         const installTaskId = context.addTask(new tasks_1.NodePackageInstallTask());
-        // angular-host-css-variableのインストール
-        const runSchematicTask = context.addTask(new tasks_1.RunSchematicTask('angular-host-css-variable', 'ng-add', { project: options.project }), [installTaskId]);
         // Set Up Angular Atomic Schematics
-        context.addTask(new tasks_1.RunSchematicTask('setup-project', Object.assign({}, options)), [runSchematicTask]);
+        context.addTask(new tasks_1.RunSchematicTask('setup-project', Object.assign({}, options)), [installTaskId]);
         return host;
     };
 }

package/src/ng-add/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/schematics/src/ng-add/index.ts"],"names":[],"mappings":";;;AACA,4DAA4F;AAC5F,8CAA0F;AAE1F,mBAAwB,OAAY;IAClC,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,MAAM,gBAAgB,GAAG,6CAAgC,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;QACjF,MAAM,wBAAwB,GAAG,gBAAgB,IAAI,UAAU,CAAC;QAEhE,IAAI,wBAAwB,KAAK,UAAU,EAAE;YAC3C,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;SAC5D;QAEH,cAAc;QACd,oCAAuB,CACtB,IAAI,EACJ,2BAA2B,EAC3B,uBAAuB,CAAC,wBAAwB,CAAC,EACjD,iBAAiB,CACjB,CAAC;QAEF,oCAAuB,CACtB,IAAI,EACJ,2BAA2B,EAC3B,uBAAuB,CAAC,wBAAwB,CAAC,EACjD,iBAAiB,CACjB,CAAC;QAEF,oCAAuB,CACtB,IAAI,EACJ,iCAAiC,EAC9B,uBAAuB,CAAC,wBAAwB,CAAC,EACpD,iBAAiB,CACjB,CAAC;QAEF,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,8BAAsB,EAAE,CAAC,CAAC;QAEpE,mCAAmC;QACnC,MAAM,gBAAgB,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,wBAAgB,CAC5D,2BAA2B,EAC3B,QAAQ,EACR,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,CAC5B,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;QAEpB,mCAAmC;QACnC,OAAO,CAAC,OAAO,CAAC,IAAI,wBAAgB,CAAC,eAAe,oBAAM,OAAO,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA;QAExF,OAAO,IAAI,CAAA;IACX,CAAC,CAAA;AACH,CAAC;AA7CD,4BA6CC;AAED,SAAgB,uBAAuB,CAAC,GAAW;IACjD,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACtE,QAAQ,KAAK,EAAE;QACb,KAAK,IAAI,CAAC,CAAC,OAAO,WAAW,CAAC;QAC9B,KAAK,IAAI,CAAC,CAAC,OAAO,WAAW,CAAC;QAC9B,OAAO,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;KACrE;AACH,CAAC;AAPD,0DAOC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/schematics/src/ng-add/index.ts"],"names":[],"mappings":";;;AACA,4DAA4F;AAC5F,8CAA0F;AAE1F,mBAAwB,OAAY;IAClC,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,MAAM,gBAAgB,GAAG,6CAAgC,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;QACjF,MAAM,wBAAwB,GAAG,gBAAgB,IAAI,UAAU,CAAC;QAEhE,IAAI,wBAAwB,KAAK,UAAU,EAAE;YAC3C,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;SAC5D;QAEH,oCAAuB,CAAC,IAAI,EAAE,uBAAuB,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAAC;QACnF,oCAAuB,CAAC,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAAC;QAExE,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,8BAAsB,EAAE,CAAC,CAAC;QAEpE,mCAAmC;QACnC,OAAO,CAAC,OAAO,CAAC,IAAI,wBAAgB,CAAC,eAAe,oBAAM,OAAO,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;QAErF,OAAO,IAAI,CAAA;IACX,CAAC,CAAA;AACH,CAAC;AAnBD,4BAmBC;AAED,SAAgB,uBAAuB,CAAC,GAAW;IACjD,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACtE,QAAQ,KAAK,EAAE;QACb,KAAK,IAAI,CAAC,CAAC,OAAO,WAAW,CAAC;QAC9B,KAAK,IAAI,CAAC,CAAC,OAAO,WAAW,CAAC;QAC9B,OAAO,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;KACrE;AACH,CAAC;AAPD,0DAOC"}

package/src/ng-add/schema.json

@@ -15,13 +15,13 @@
       "description": "Setup components directory",
       "type": "string",
       "default": "src/app/_shared/components",
-      "x-prompt": "Where do you setup Angular Atomic Components?" 
+      "x-prompt": "Where do you setup Angular Atomic Components?\nIf you use Nx workspace you should input `apps/app/src/app/_shared/components`" 
     },
 		"stylesDir": {
 			"description": "Setup styles directory",
 			"type": "string",
 			"default": "src/styles",
-			"x-prompt": "Where do you setup Angular Atomic Styles?"
+			"x-prompt": "Where do you setup Angular Atomic Styles?\nIf you use Nx workspace you should input `apps/app/src/styles`"
 
 		}
   },

package/src/setup/files/atomic/_atom.scss

@@ -1,7 +1,6 @@
-@import 'host-variable';
-@import 'atomic/component';
+@use 'scoped-var' as *;
+@use 'atomic/component' as *;
 
 @mixin atom($host) {
   @include component($host);
 }
-

package/src/setup/files/atomic/_component.scss

@@ -1,12 +1,5 @@
-@import 'host-variable';
+@use 'scoped-var' as *;
 
 @mixin component($host) {
   display: block;
-
-  @include hvar(--cell, 8px);
-
-	* {
-    --cell: #{hvar(--cell)};
-  }
 }
-

package/src/setup/files/atomic/_molecule.scss

@@ -1,7 +1,6 @@
-@import 'host-variable';
-@import 'atomic/component';
+@use 'scoped-var' as *;
+@use 'atomic/component' as *;
 
 @mixin molecule($host) {
   @include component($host);
 }
-

package/src/setup/files/atomic/_organism.scss

@@ -1,7 +1,6 @@
-@import 'host-variable';
-@import 'atomic/component';
+@use 'scoped-var' as *;
+@use 'atomic/component' as *;
 
 @mixin organism($host) {
 	@include component($host);
 }
-

package/src/setup/files/atomic/_page.scss

@@ -1,7 +1,6 @@
-@import 'host-variable';
-@import 'atomic/component';
+@use 'scoped-var' as *;
+@use 'atomic/component' as *;
 
 @mixin page($host) {
 	@include component($host);
 }
-

package/src/setup/files/atomic/_template.scss

@@ -1,7 +1,6 @@
-@import 'host-variable';
-@import 'atomic/component';
+@use 'scoped-var' as *;
+@use 'atomic/component' as *;
 
 @mixin template($host) {
 	@include component($host);
 }
-

package/src/style-header/_test/example.scss

@@ -0,0 +1,6 @@
+@use 'scoped-var' as * with ($host: 'example');
+@use 'atomic/component' as *;
+
+:host {
+  @include component($host);
+}

package/src/style-header/index.d.ts

@@ -0,0 +1,4 @@
+import { Rule } from '@angular-devkit/schematics';
+import { Schema } from './schema';
+declare const _default: (_options: Schema) => Rule;
+export default _default;

package/src/style-header/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const strings_1 = require("@angular-devkit/core/src/utils/strings");
+const format = require("string-template");
+const path_1 = require("path");
+const save_file_1 = require("../_utilities/save-file");
+const buildOptions = (options) => {
+    var _a, _b;
+    return (Object.assign(Object.assign({}, options), { name: (options === null || options === void 0 ? void 0 : options.name) || ((_a = path_1.basename(options.path, '.scss').split('.')) === null || _a === void 0 ? void 0 : _a[0]), type: (options === null || options === void 0 ? void 0 : options.type) || ((_b = path_1.basename(options.path, '.scss').split('.').reverse()) === null || _b === void 0 ? void 0 : _b[0]) }));
+};
+const buildStyle = ({ styleHeader, name, type }) => format(styleHeader, { name: strings_1.dasherize(name), type: type });
+exports.default = (_options) => (host) => {
+    const _a = buildOptions(_options), { path } = _a, extra = tslib_1.__rest(_a, ["path"]);
+    return save_file_1.saveFile(host, path, (src) => `${buildStyle(extra)}${src}`);
+};
+//# sourceMappingURL=index.js.map

package/src/style-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/schematics/src/style-header/index.ts"],"names":[],"mappings":";;;AACA,oEAAkE;AAClE,0CAA0C;AAC1C,+BAAgC;AAEhC,uDAAmD;AAEnD,MAAM,YAAY,GAAG,CAAC,OAAe,EAAU,EAAE;;IAAC,OAAA,iCAC7C,OAAO,KACV,IAAI,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,YAAI,eAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,0CAAG,CAAC,EAAC,EACtE,IAAI,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,YAAI,eAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,0CAAG,CAAC,EAAC,IAChF,CAAA;CAAA,CAAC;AAEH,MAAM,UAAU,GAAG,CAAC,EAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAgD,EAAU,EAAE,CACtG,MAAM,CAAC,WAAW,EAAE,EAAC,IAAI,EAAE,mBAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;AAE3D,kBAAe,CAAC,QAAgB,EAAQ,EAAE,CAAC,CAAC,IAAU,EAAE,EAAE;IACxD,MAAM,KAAmB,YAAY,CAAC,QAAQ,CAAC,EAAzC,EAAC,IAAI,OAAoC,EAA/B,KAAK,sBAAf,QAAgB,CAAyB,CAAC;IAChD,OAAO,oBAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,GAAW,EAAU,EAAE,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;AACrF,CAAC,CAAA"}

package/src/style-header/index.spec.ts

@@ -0,0 +1,43 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { readFileSync } from 'fs';
+import * as path from 'path';
+import { join } from 'path';
+import { createWorkspace } from '../_testing';
+
+const COLLECTION_PATH = path.join(__dirname, '../../collection.json');
+
+describe('StyleHeader', () => {
+  const runner = new SchematicTestRunner('@ng-atomic/schematics', COLLECTION_PATH);
+  let tree: UnitTestTree;
+
+  beforeEach(async () => {
+    tree = await createWorkspace(runner, tree);
+    const options = {project: 'app', style: 'scss', name: 'example', skipImport: true };
+    tree = await runner.runExternalSchematicAsync('@schematics/angular', 'component', options, tree).toPromise();
+  });
+
+  describe('given all options', () => {
+    it('should be added style header', async () => {
+      const PATH = '/projects/app/src/app/example/example.component.scss';
+      const options = {path: PATH, name: 'example', type: 'component'};
+  
+      await runner.runSchematicAsync('style-header', options, tree).toPromise();
+      const input = tree.read(PATH).toString('utf-8');
+      const expected = readFileSync(join(__dirname, '_test/example.scss')).toString();
+      expect(input.replace(/\s/g, '')).toEqual(expected.replace(/\s/g, ''));
+    });
+  });
+
+  describe('given only options.path', () => {
+    it('should be added style header', async () => {
+      const PATH = '/projects/app/src/app/example/example.component.scss';
+      const options = {path: PATH};
+  
+      await runner.runSchematicAsync('style-header', options, tree).toPromise();
+      const input = tree.read(PATH).toString('utf-8');
+      const expected = readFileSync(join(__dirname, '_test/example.scss')).toString();
+      expect(input.replace(/\s/g, '')).toEqual(expected.replace(/\s/g, ''));
+    });
+  });
+
+});

package/src/style-header/schema.d.ts

@@ -0,0 +1,6 @@
+export interface Schema {
+    path: string;
+    name: string;
+    type: string;
+    styleHeader: string;
+}

package/src/style-header/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/src/style-header/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../libs/schematics/src/style-header/schema.ts"],"names":[],"mappings":""}

package/src/style-header/schema.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "SchematicsAngularComponent",
+  "title": "Style Header Options Schema",
+  "type": "object",
+  "description": "Creates a new generic component definition in the given or default project.",
+  "properties": {
+		"path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path at which to create the component file, relative to the current workspace. Default is a folder with the same name as the component in the project root.",
+      "visible": false
+    },
+    "styleHeader": {
+			"type": "string",
+			"default": "@use 'scoped-var' as * with ($host: '{name}');\n@use 'atomic/{type}' as *;\n:host {\n\t@include {type}($host);\n}\n",
+			"description": "scss header template. you can use template engine like `($host: '{name}.{type}'`. "
+		}
+  },
+  "required": ["path"]
+}
+