@ng-atomic/schematics 1.3.0 → 1.6.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.3.0",
+  "version": "1.6.0",
   "schematics": "./collection.json",
   "ng-add": {
     "save": "devDependencies"
@@ -8,6 +8,9 @@
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "dependencies": {
+    "@angular/core": "^11.2.0",
+    "@angular/common": "^11.2.0",
+    "@angular/router": "^11.2.0",
     "string-template": "^1.0.0"
   },
   "peerDependencies": {}

package/src/_utilities/angular-config.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addStyleIncludePath = exports.setDefaultCollection = exports.addSchematicsConfig = void 0;
 const lodash_1 = require("lodash");
 const overwrite_1 = require("./overwrite");
-const PACKAGE_NAME = 'angular-atomic-schematics';
+const PACKAGE_NAME = '@ng-atomic/schematics';
 exports.addSchematicsConfig = ({ project, componentsDir }, type) => (host) => {
     const query = `projects.${project}.schematics.${PACKAGE_NAME}:${type}`;
     return overwrite_1.overwrite(host, 'angular.json', json => (lodash_1.set(json, query, { 'path': `${componentsDir}/${type}s` }), json));

package/src/_utilities/angular-config.js.map

@@ -1 +1 @@
-{"version":3,"file":"angular-config.js","sourceRoot":"","sources":["../../../../../libs/schematics/src/_utilities/angular-config.ts"],"names":[],"mappings":";;;AACA,mCAAkC;AAClC,2CAAwC;AAExC,MAAM,YAAY,GAAG,2BAA2B,CAAC;AAEpC,QAAA,mBAAmB,GAAG,CAAC,EAAC,OAAO,EAAE,aAAa,EAAM,EAAE,IAAY,EAAE,EAAE,CAAC,CAAC,IAAU,EAAQ,EAAE;IACxG,MAAM,KAAK,GAAG,YAAY,OAAO,eAAe,YAAY,IAAI,IAAI,EAAE,CAAC;IACvE,OAAO,qBAAS,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,YAAG,CAAC,IAAI,EAAE,KAAK,EAAE,EAAC,MAAM,EAAE,GAAG,aAAa,IAAI,IAAI,GAAG,EAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;AACjH,CAAC,CAAC;AAEW,QAAA,oBAAoB,GAAG,GAAG,EAAE,CAAC,CAAC,IAAU,EAAE,EAAE;IACxD,OAAO,qBAAS,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,YAAG,CAAC,IAAI,EAAE,uBAAuB,EAAE,YAAY,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;AAC1G,CAAC,CAAA;AAEY,QAAA,mBAAmB,GAAG,CAAC,EAAC,OAAO,EAAE,SAAS,EAAM,EAAE,EAAE,CAAC,CAAC,IAAU,EAAE,EAAE;IAChF,MAAM,KAAK,GAAG,YAAY,OAAO,gEAAgE,CAAC;IAClG,OAAO,qBAAS,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,YAAG,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,CAAC,YAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;AACzH,CAAC,CAAC"}
+{"version":3,"file":"angular-config.js","sourceRoot":"","sources":["../../../../../libs/schematics/src/_utilities/angular-config.ts"],"names":[],"mappings":";;;AACA,mCAAkC;AAClC,2CAAwC;AAExC,MAAM,YAAY,GAAG,uBAAuB,CAAC;AAEhC,QAAA,mBAAmB,GAAG,CAAC,EAAC,OAAO,EAAE,aAAa,EAAM,EAAE,IAAY,EAAE,EAAE,CAAC,CAAC,IAAU,EAAQ,EAAE;IACxG,MAAM,KAAK,GAAG,YAAY,OAAO,eAAe,YAAY,IAAI,IAAI,EAAE,CAAC;IACvE,OAAO,qBAAS,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,YAAG,CAAC,IAAI,EAAE,KAAK,EAAE,EAAC,MAAM,EAAE,GAAG,aAAa,IAAI,IAAI,GAAG,EAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;AACjH,CAAC,CAAC;AAEW,QAAA,oBAAoB,GAAG,GAAG,EAAE,CAAC,CAAC,IAAU,EAAE,EAAE;IACxD,OAAO,qBAAS,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,YAAG,CAAC,IAAI,EAAE,uBAAuB,EAAE,YAAY,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;AAC1G,CAAC,CAAA;AAEY,QAAA,mBAAmB,GAAG,CAAC,EAAC,OAAO,EAAE,SAAS,EAAM,EAAE,EAAE,CAAC,CAAC,IAAU,EAAE,EAAE;IAChF,MAAM,KAAK,GAAG,YAAY,OAAO,gEAAgE,CAAC;IAClG,OAAO,qBAAS,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,YAAG,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,CAAC,YAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;AACzH,CAAC,CAAC"}

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/strict' 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/index.js

@@ -8,30 +8,22 @@ const parse_name_1 = require("@schematics/angular/utility/parse-name");
 const workspace_1 = require("@schematics/angular/utility/workspace");
 const path_1 = require("path");
 exports.atomicComponent = (options) => (host, _) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b;
-    (_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;
+    var _a;
+    options.prefix || (options.prefix = `${options.type}s`);
+    options.path = path_1.join(yield workspace_1.createDefaultPath(host, options.project), (_a = options === null || options === void 0 ? void 0 : options.path) !== null && _a !== void 0 ? _a : '');
+    const { name, path, type, project } = options = Object.assign(Object.assign({}, options), parse_name_1.parseName(options.path, options.name));
+    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.externalSchematic('@schematics/angular', 'module', { name, path, project }),
+        schematics_1.externalSchematic('@schematics/angular', 'component', Object.assign(Object.assign({}, options), { type: componentExt, export: true })),
         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)])),
+        schematics_1.schematic('style-header', Object.assign(Object.assign({}, options), { name, type, path: scssPath })),
     ]);
 });
-exports.atom = (options) => exports.atomicComponent(buildOptions(options, 'atom'));
-exports.molecule = (options) => exports.atomicComponent(buildOptions(options, 'molecule'));
-exports.organism = (options) => exports.atomicComponent(buildOptions(options, 'organism'));
-exports.template = (options) => exports.atomicComponent(buildOptions(options, 'template'));
-exports.frame = (options) => exports.atomicComponent(buildOptions(options, 'frame'));
-const buildOptions = (options, type) => (Object.assign(Object.assign({}, options), { type: options.type || type, prefix: options.prefix || `${options.type || type}s` }));
-const addExportIntoIndexTs = ({ path, name }) => (tree) => {
-    const indexTsPath = path_1.join(path, 'index.ts');
-    tree.exists(indexTsPath) || tree.create(indexTsPath, '');
-    const lines = tree.read(indexTsPath).toString('utf-8').split('\n').filter(line => line.length);
-    const line = `export { ${strings.classify(name)}Module } from './${strings.dasherize(name)}';`;
-    tree.overwrite(indexTsPath, (lines.includes(line) ? lines : [...lines, line]).join('\n'));
-    return tree;
-};
+exports.atom = (options) => exports.atomicComponent((Object.assign(Object.assign({}, options), { type: 'atom' })));
+exports.molecule = (options) => exports.atomicComponent((Object.assign(Object.assign({}, options), { type: 'molecule' })));
+exports.organism = (options) => exports.atomicComponent((Object.assign(Object.assign({}, options), { type: 'organism' })));
+exports.template = (options) => exports.atomicComponent((Object.assign(Object.assign({}, options), { type: 'template' })));
+exports.frame = (options) => exports.atomicComponent((Object.assign(Object.assign({}, options), { type: 'frame' })));
 //# sourceMappingURL=index.js.map

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":";;;;AAAA,2DAIoC;AACpC,kEAAkE;AAClE,uEAAmE;AACnE,qEAA0E;AAC1E,+BAA4B;AAGf,QAAA,eAAe,GAAG,CAAC,OAAe,EAAQ,EAAE,CAAC,CAAO,IAAU,EAAE,CAAmB,EAAE,EAAE;;IACnG,OAAO,CAAC,MAAM,KAAd,OAAO,CAAC,MAAM,GAAK,GAAG,OAAO,CAAC,IAAI,GAAG,EAAC;IACtC,OAAO,CAAC,IAAI,GAAG,WAAI,CAAC,MAAM,6BAAiB,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,mCAAI,EAAE,CAAC,CAAC;IAEzF,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO,mCAAO,OAAO,GAAK,sBAAS,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IACvG,MAAM,YAAY,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC;IACrE,MAAM,QAAQ,GAAG,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,YAAY,OAAO,CAAC;IAEhE,OAAO,kBAAK,CAAC;QACZ,8BAAiB,CAAC,qBAAqB,EAAE,QAAQ,EAAE,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;QACzE,8BAAiB,CAAC,qBAAqB,EAAE,WAAW,kCAAM,OAAO,KAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,IAAE;QACrG,sBAAS,CAAC,kBAAK,CAAC,gBAAG,CAAC,SAAS,CAAC,EAAE,CAAC,2BAAc,iCAAK,OAAO,KAAE,IAAI,EAAE,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,WAAW,IAAE,EAAE,iBAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC7G,sBAAS,CAAC,cAAc,kCAAM,OAAO,KAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,IAAE;KACnE,CAAC,CAAC;AACJ,CAAC,CAAA,CAAC;AAEW,QAAA,IAAI,GAAG,CAAC,OAAe,EAAQ,EAAE,CAAC,uBAAe,CAAC,iCAAK,OAAO,KAAE,IAAI,EAAE,MAAM,IAAE,CAAC,CAAC;AAChF,QAAA,QAAQ,GAAG,CAAC,OAAe,EAAQ,EAAE,CAAC,uBAAe,CAAC,iCAAK,OAAO,KAAE,IAAI,EAAE,UAAU,IAAE,CAAC,CAAC;AACxF,QAAA,QAAQ,GAAG,CAAC,OAAe,EAAQ,EAAE,CAAC,uBAAe,CAAC,iCAAK,OAAO,KAAE,IAAI,EAAE,UAAU,IAAE,CAAC,CAAC;AACxF,QAAA,QAAQ,GAAG,CAAC,OAAe,EAAQ,EAAE,CAAC,uBAAe,CAAC,iCAAK,OAAO,KAAE,IAAI,EAAE,UAAU,IAAE,CAAC,CAAC;AACxF,QAAA,KAAK,GAAG,CAAC,OAAe,EAAQ,EAAE,CAAC,uBAAe,CAAC,iCAAK,OAAO,KAAE,IAAI,EAAE,OAAO,IAAE,CAAC,CAAC"}

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

@@ -56,8 +56,8 @@ describe('AtomicComponent Schematics', () => {
       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 () => {
@@ -66,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/strict' as * with ($host: 'example');
+          @use 'atomic/dialog' as *;
+
+          :host {
+            @include dialog($host);
+          }
+        `.replace(/\s/g, ''));
+      });
     });
   });
 
@@ -101,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/strict' 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.0.0', 'devDependencies');
+        _utilities_1.addPackageToPackageJson(host, 'scoped-var', '^1.0.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', 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,QAAQ,EAAE,iBAAiB,CAAC,CAAC;QACpF,oCAAuB,CAAC,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,iBAAiB,CAAC,CAAC;QAEzE,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,8BAAsB,EAAE,CAAC,CAAC;QAEpE,mCAAmC;QACnC,OAAO,CAAC,OAAO,CAAC,IAAI,wBAAgB,CAAC,OAAO,oBAAM,OAAO,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;QAE7E,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

@@ -14,14 +14,14 @@
     "componentsDir": {
       "description": "Setup components directory",
       "type": "string",
-      "default": "src/app/_shared/components",
+      "default": "_shared/components",
       "x-prompt": "Where do you setup Angular Atomic 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/page/_test/{test.module.ts.expected → example.module.ts}

@@ -1,26 +1,26 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
-import { TestPage } from './test.page';
+import { ExamplePage } from './example.page';
 
 const routes: Routes = [
   {
     path: '',
-    component: TestPage,
+    component: ExamplePage,
     // loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)
   }
 ];
 
 @NgModule({
   declarations: [
-    TestPage
+    ExamplePage
   ],
   imports: [
     CommonModule,
     RouterModule.forChild(routes)
   ],
   exports: [
-    TestPage
+    ExamplePage
   ]
 })
-export class TestModule { }
+export class ExampleModule { }

package/src/page/_test/example.page.scss

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

package/src/page/_test/example.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'pages-example',
+  templateUrl: './example.page.html',
+  styleUrls: ['./example.page.scss']
+})
+export class ExamplePage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/page/index.js

@@ -8,19 +8,21 @@ const strings_1 = require("@angular-devkit/core/src/utils/strings");
 const _utilities_1 = require("../_utilities");
 const workspace_1 = require("@schematics/angular/utility/workspace");
 exports.page = (options) => (host) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b;
-    (_a = options.path) !== null && _a !== void 0 ? _a : (options.path = yield workspace_1.createDefaultPath(host, options.project));
-    (_b = options.type) !== null && _b !== void 0 ? _b : (options.type = 'page');
+    var _a;
+    options.type = 'page';
     options.name = resolveName(options.name);
-    const { name, path, type, project, styleHeader } = options = Object.assign(Object.assign({}, options), parse_name_1.parseName(options.path, options.name));
+    options.prefix || (options.prefix = `${options.type}s`);
+    (_a = options.path) !== null && _a !== void 0 ? _a : (options.path = yield workspace_1.createDefaultPath(host, options.project));
+    const { name, path, type, project } = options = Object.assign(Object.assign({}, options), parse_name_1.parseName(options.path, options.name));
+    const componentExt = options.useTypeAsExtension ? type : 'component';
+    const scssPath = `${path}/${name}/${name}.${componentExt}.scss`;
     const pages = getPagesOptions(`${path}/${name}`);
-    delete options['styleHeader'];
     return schematics_1.chain([
         schematics_1.schematic('pages', Object.assign(Object.assign({}, pages), { project })),
         addRouteIntoPagesModule(options, pages),
         schematics_1.schematic('pages', { name, path, project }),
-        schematics_1.externalSchematic('@schematics/angular', 'component', Object.assign(Object.assign({}, options), { export: true })),
-        // externalSchematic('@ng-atomic/host-variable', 'component', {...options, styleHeader: format(styleHeader, {name, type}), export: true}),
+        schematics_1.externalSchematic('@schematics/angular', 'component', Object.assign(Object.assign({}, options), { changeDetection: 'Default', export: true })),
+        schematics_1.schematic('style-header', Object.assign(Object.assign({}, options), { name, type, path: scssPath })),
         addRouteIntoPageModule(options, { path, name }),
     ]);
 });

package/src/page/index.js.map

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

package/src/page/index.spec.ts

@@ -12,18 +12,26 @@ describe('Page Schematics', () => {
   });
 
   it('should create atomic component files', async () => {
-    const options = {project: 'app', name: 'test'};
+    const options = {project: 'app', name: 'example'};
     const host = await runner.runSchematicAsync('page', options, tree).toPromise();
     expect(host.files.includes('/projects/app/src/app/pages/pages.module.ts')).toBeTruthy();
-    expect(host.files.includes('/projects/app/src/app/pages/test/test.module.ts')).toBeTruthy();
-    expect(host.files.includes('/projects/app/src/app/pages/test/test.page.html')).toBeTruthy();
-    expect(host.files.includes('/projects/app/src/app/pages/test/test.page.scss')).toBeTruthy();
-    expect(host.files.includes('/projects/app/src/app/pages/test/test.page.spec.ts')).toBeTruthy();
-    expect(host.files.includes('/projects/app/src/app/pages/test/test.page.ts')).toBeTruthy();
+    expect(host.files.includes('/projects/app/src/app/pages/example/example.module.ts')).toBeTruthy();
+    expect(host.files.includes('/projects/app/src/app/pages/example/example.page.html')).toBeTruthy();
+    expect(host.files.includes('/projects/app/src/app/pages/example/example.page.scss')).toBeTruthy();
+    expect(host.files.includes('/projects/app/src/app/pages/example/example.page.spec.ts')).toBeTruthy();
+    expect(host.files.includes('/projects/app/src/app/pages/example/example.page.ts')).toBeTruthy();
 
-    const input = host.read('/projects/app/src/app/pages/test/test.module.ts').toString('utf-8');
-    const expected = readFileSync(join(__dirname, '_test/test.module.ts.expected')).toString('utf-8');
-    expect(input.replace(/\s/g, '')).toEqual(expected.replace(/\s/g, ''));
+    const inputModuleTs = host.read('/projects/app/src/app/pages/example/example.module.ts').toString('utf-8');
+    const expectedModuleTs = readFileSync(join(__dirname, '_test/example.module.ts')).toString('utf-8');
+    expect(inputModuleTs.replace(/\s/g, '')).toEqual(expectedModuleTs.replace(/\s/g, ''));
+
+    const inputTs = host.read('/projects/app/src/app/pages/example/example.page.ts').toString('utf-8');
+    const expectedTs = readFileSync(join(__dirname, '_test/example.page.ts')).toString('utf-8');
+    expect(inputTs.replace(/\s/g, '')).toEqual(expectedTs.replace(/\s/g, ''));
+
+    const inputScss = host.read('/projects/app/src/app/pages/example/example.page.scss').toString('utf-8');
+    const expectedScss = readFileSync(join(__dirname, '_test/example.page.scss')).toString('utf-8');
+    expect(inputScss.replace(/\s/g, '')).toEqual(expectedScss.replace(/\s/g, ''));
     
   });
 });

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/setup/index.spec.ts

@@ -14,12 +14,12 @@ describe('Setup Schematics', () => {
     const options = {project: 'app', name: 'pages'};
     const host = await runner.runSchematicAsync('setup', options, tree).toPromise();
     const angularJson = JSON.parse(host.read('/angular.json').toString('utf-8'));
-    expect(get(angularJson, 'cli.defaultCollection')).toEqual('angular-atomic-schematics');
+    expect(get(angularJson, 'cli.defaultCollection')).toEqual('@ng-atomic/schematics');
     const schematicsJson = get(angularJson, 'projects.app.schematics');
 
     for (const type of ['atom', 'molecule', 'organism', 'template']) {
-      expect(get(schematicsJson, `angular-atomic-schematics:${type}`))
-        .toEqual({path: `src/app/_shared/components/${type}s`});
+      expect(get(schematicsJson, `@ng-atomic/schematics:${type}`))
+        .toEqual({path: `_shared/components/${type}s`});
     }
 
     const architectJson = get(angularJson, 'projects.app.architect');
@@ -31,7 +31,7 @@ describe('Setup Schematics', () => {
     }
 
     const tsconfigJson = JSON.parse(host.read('/tsconfig.json').toString('utf-8'));
-    expect(get(tsconfigJson, 'compilerOptions.paths.@components')).toContain('src/app/_shared/components');
-    expect(get(tsconfigJson, 'compilerOptions.paths.@components/*')).toContain('src/app/_shared/components/*');
+    expect(get(tsconfigJson, 'compilerOptions.paths.@components')).toContain('_shared/components');
+    expect(get(tsconfigJson, 'compilerOptions.paths.@components/*')).toContain('_shared/components/*');
   });
 });

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

@@ -0,0 +1,6 @@
+@use 'scoped-var/strict' 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/strict' 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"]
+}
+