diff --git a/.verdaccio/htpasswd b/.verdaccio/htpasswd index 8b73dbf2d1e78..8391cd4b0a901 100644 --- a/.verdaccio/htpasswd +++ b/.verdaccio/htpasswd @@ -1,2 +1 @@ test:$6FrCaT/v0dwE:autocreated 2020-03-25T19:10:50.254Z -dddd:ZpRSQxtFPtZog:autocreated 2021-08-21T07:57:21.687Z diff --git a/e2e/angular-core/src/angular-core.test.ts b/e2e/angular-core/src/angular-core.test.ts index e1934db898ee6..532dea4dd1165 100644 --- a/e2e/angular-core/src/angular-core.test.ts +++ b/e2e/angular-core/src/angular-core.test.ts @@ -44,10 +44,11 @@ describe('Angular Package', () => { names(mylib).className }Module } from '@${proj}/my-dir/${mylib}'; import { AppComponent } from './app.component'; + import { NxWelcomeComponent } from './nx-welcome.component'; @NgModule({ imports: [BrowserModule, MyDir${names(mylib).className}Module], - declarations: [AppComponent], + declarations: [AppComponent, NxWelcomeComponent], bootstrap: [AppComponent] }) export class AppModule {} diff --git a/e2e/angular-extensions/src/angular-app.test.ts b/e2e/angular-extensions/src/angular-app.test.ts index 1aea96adb10ef..8eac6a924f21a 100644 --- a/e2e/angular-extensions/src/angular-app.test.ts +++ b/e2e/angular-extensions/src/angular-app.test.ts @@ -53,9 +53,10 @@ describe('Angular Package', () => { }Module} from '@${proj}/${buildableLib}'; import { AppComponent } from './app.component'; + import { NxWelcomeComponent } from './nx-welcome.component'; @NgModule({ - declarations: [AppComponent], + declarations: [AppComponent, NxWelcomeComponent], imports: [BrowserModule, ${names(buildableLib).className}Module], providers: [], bootstrap: [AppComponent], diff --git a/e2e/next/src/next.test.ts b/e2e/next/src/next.test.ts index f771ddc9704f1..b8207d0a83d16 100644 --- a/e2e/next/src/next.test.ts +++ b/e2e/next/src/next.test.ts @@ -613,7 +613,6 @@ async function checkApp( const buildResult = runCLI(`build ${appName} --withDeps`); expect(buildResult).toContain(`Compiled successfully`); checkFilesExist(`dist/apps/${appName}/.next/build-manifest.json`); - checkFilesExist(`dist/apps/${appName}/public/star.svg`); const packageJson = readJson(`dist/apps/${appName}/package.json`); expect(packageJson.dependencies.react).toBeDefined(); diff --git a/packages/angular/src/generators/application/application.spec.ts b/packages/angular/src/generators/application/application.spec.ts index b079b10eb6444..c1e224ba6ed6f 100644 --- a/packages/angular/src/generators/application/application.spec.ts +++ b/packages/angular/src/generators/application/application.spec.ts @@ -133,7 +133,7 @@ describe('app', () => { const myAppPrefix = workspaceJson.projects['my-app'].prefix; expect(myAppPrefix).toEqual('proj'); - expect(appE2eSpec).toContain('Welcome to my-app!'); + expect(appE2eSpec).toContain('Welcome my-app'); }); it('should set a new prefix and use it', async () => { @@ -151,7 +151,7 @@ describe('app', () => { const myAppPrefix = workspaceJson.projects['my-app-with-prefix'].prefix; expect(myAppPrefix).toEqual('custom'); - expect(appE2eSpec).toContain('Welcome to my-app-with-prefix!'); + expect(appE2eSpec).toContain('Welcome my-app-with-prefix'); }); // TODO: this should work @@ -289,7 +289,7 @@ describe('app', () => { await generateApp(appTree, 'myApp', { directory: 'myDir' }); expect( appTree.read('apps/my-dir/my-app/src/app/app.component.html', 'utf-8') - ).toContain('Thank you for using and showing some ♥ for Nx.'); + ).toContain(''); }); it("should update `template`'s property of AppComponent with Nx content", async () => { @@ -299,7 +299,17 @@ describe('app', () => { }); expect( appTree.read('apps/my-dir/my-app/src/app/app.component.ts', 'utf-8') - ).toContain('Thank you for using and showing some ♥ for Nx.'); + ).toContain(''); + }); + + it('should create Nx specific `nx-welcome.component.ts` file', async () => { + await generateApp(appTree, 'myApp', { directory: 'myDir' }); + expect( + appTree.read( + 'apps/my-dir/my-app/src/app/nx-welcome.component.ts', + 'utf-8' + ) + ).toContain('Hello there'); }); it('should update the AppComponent spec to target Nx content', async () => { @@ -313,7 +323,7 @@ describe('app', () => { ); expect(testFileContent).toContain(`querySelector('h1')`); - expect(testFileContent).toContain('Welcome to my-dir-my-app!'); + expect(testFileContent).toContain('Welcome my-dir-my-app'); }); }); @@ -633,7 +643,7 @@ describe('app', () => { expect( appTree.read('apps/my-app-e2e/src/app.e2e-spec.ts', 'utf-8') - ).toContain(`'Welcome to my-app!'`); + ).toContain(`'Welcome my-app'`); expect( appTree.read('apps/my-app-e2e/src/app.po.ts', 'utf-8') ).toContain(`'proj-root header h1'`); @@ -650,7 +660,7 @@ describe('app', () => { 'apps/my-directory/my-app-e2e/src/app.e2e-spec.ts', 'utf-8' ) - ).toContain(`'Welcome to my-directory-my-app!'`); + ).toContain(`'Welcome my-directory-my-app'`); expect( appTree.read('apps/my-directory/my-app-e2e/src/app.po.ts', 'utf-8') ).toContain(`'proj-root header h1'`); diff --git a/packages/angular/src/generators/application/application.ts b/packages/angular/src/generators/application/application.ts index 2655e104bf85e..b045b6a50556a 100644 --- a/packages/angular/src/generators/application/application.ts +++ b/packages/angular/src/generators/application/application.ts @@ -17,8 +17,8 @@ import init from '../init/init'; import { createFiles, normalizeOptions, - updateComponentStyles, - updateComponentTemplate, + updateAppComponentTemplate, + updateNxComponentTemplate, updateConfigFiles, addE2e, updateComponentSpec, @@ -78,8 +78,24 @@ export async function applicationGenerator( moveFilesToNewDirectory(host, appProjectRoot, options.appProjectRoot); updateConfigFiles(host, options); - updateComponentTemplate(host, options); - updateComponentStyles(host, options); + updateAppComponentTemplate(host, options); + + // Create the NxWelcomeComponent + const angularComponentSchematic = wrapAngularDevkitSchematic( + '@schematics/angular', + 'component' + ); + await angularComponentSchematic(host, { + name: 'NxWelcome', + inlineTemplate: true, + prefix: options.prefix, + skipTests: true, + style: 'none', + flat: true, + viewEncapsulation: 'None', + project: options.name, + }); + updateNxComponentTemplate(host, options); if (options.unitTestRunner !== UnitTestRunner.None) { updateComponentSpec(host, options); diff --git a/packages/angular/src/generators/application/lib/index.ts b/packages/angular/src/generators/application/lib/index.ts index 6d72bd4ace1c0..78a03502c2e54 100644 --- a/packages/angular/src/generators/application/lib/index.ts +++ b/packages/angular/src/generators/application/lib/index.ts @@ -12,8 +12,8 @@ export * from './remove-scaffolded-e2e'; export * from './root-router-config'; export * from './set-app-strict-default'; export * from './update-component-spec'; -export * from './update-component-styles'; -export * from './update-component-template'; +export * from './update-app-component-template'; +export * from './update-nx-component-template'; export * from './update-config-files'; export * from './update-e2e-project'; export * from './update-editor-tsconfig'; diff --git a/packages/angular/src/generators/application/lib/nrwl-home-tpl.ts b/packages/angular/src/generators/application/lib/nrwl-home-tpl.ts index 19cf18b34794e..dabe84ec8f22d 100644 --- a/packages/angular/src/generators/application/lib/nrwl-home-tpl.ts +++ b/packages/angular/src/generators/application/lib/nrwl-home-tpl.ts @@ -1,322 +1,798 @@ export const nrwlHomeTemplate = { - html: ` -
- -

Welcome to {{title}}!

-
-
-

Resources & Tools

-

- Thank you for using and showing some ♥ for Nx. -

-
- If you like Nx, please give it a star: -
- - Star + getSelector: (prefix) => `<${prefix}-nx-welcome>`, + template: (title) => ` + + +
+
+ +
+

+ Hello there, + Welcome ${title} 👋 +

+
+ + + -

- Here are some links to help you get started. -

-
+
+ + +
+
+

Learning materials

+ + - Nx video course - - -
  • - + + + Documentation + Everything is in there + + - Nx video tutorial - -
    • -
  • - + + + + - Interactive tutorial - -
    • -
  • - - - - - - Nx Cloud - -
    • - -

    Next Steps

    -

    Here are some things you can do with Nx.

    -
    - Add UI library - 
    -  # Generate UI lib
-  nx g @nrwl/angular:lib ui
-  
-  # Add a component
-  nx g @nrwl/angular:component xyz --project ui
    -
    -
    - View dependency graph - 
    nx dep-graph
    -
    -
    - Run affected commands - 
    -  # see what's been affected by changes
-  nx affected:dep-graph
-  
-  # run tests for current changes
-  nx affected:test
-  
-  # run e2e tests for current changes
-  nx affected:e2e
-
    + + + Blog + Changelog, features & events + + + + + + + + YouTube + + + + YouTube channel + Nx Show, talks & tutorials + + + + + + + + + + + Interactive tutorials + Create an app, step-by-step + + + + + + + + + + + + + Video courses + Nx custom courses + + + + + +
    + +
    + + +
    +

    Next steps

    +

    Here are some things you can do with Nx:

    +
    + + + + + Add UI library + + 
    # Generate UI lib
+nx g @nrwl/angular:lib ui
+
+# Add a component
+nx g @nrwl/angular:component button --project ui
    +
    +
    + + + + + View interactive dependency graph + + 
    nx dep-graph
    +
    +
    + + + + + Run affected commands + + 
    # see what's been affected by changes
+nx affected:dep-graph
+
+# run tests for current changes
+nx affected:test
+
+# run e2e tests for current changes
+nx affected:e2e
    +
    +
    + +

    + Carefully crafted with + - -

    - `, - css: ` - /* - * Remove template code below - */ - :host { - display: block; - font-family: sans-serif; - min-width: 300px; - max-width: 600px; - margin: 50px auto; - } - - .gutter-left { - margin-left: 9px; - } - - .col-span-2 { - grid-column: span 2; - } - - .flex { - display: flex; - align-items: center; - justify-content: center; - } - - header { - background-color: #143055; - color: white; - padding: 5px; - border-radius: 3px; - } - - main { - padding: 0 36px; - } - - p { - text-align: center; - } - - h1 { - text-align: center; - margin-left: 18px; - font-size: 24px; - } - - h2 { - text-align: center; - font-size: 20px; - margin: 40px 0 10px 0; - } - - .resources { - text-align: center; - list-style: none; - padding: 0; - display: grid; - grid-gap: 9px; - grid-template-columns: 1fr 1fr; - } - - .resource { - color: #0094ba; - height: 36px; - background-color: rgba(0, 0, 0, 0); - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 3px 9px; - text-decoration: none; - } - - .resource:hover { - background-color: rgba(68, 138, 255, 0.04); - } - - pre { - padding: 9px; - border-radius: 4px; - background-color: black; - color: #eee; - } - - details { - border-radius: 4px; - color: #333; - background-color: rgba(0, 0, 0, 0); - border: 1px solid rgba(0, 0, 0, 0.12); - padding: 3px 9px; - margin-bottom: 9px; - } - - summary { - cursor: pointer; - outline: none; - height: 36px; - line-height: 36px; - } - - .github-star-container { - margin-top: 12px; - line-height: 20px; - } - - .github-star-container a { - display: flex; - align-items: center; - text-decoration: none; - color: #333; - } - - .github-star-badge { - color: #24292e; - display: flex; - align-items: center; - font-size: 12px; - padding: 3px 10px; - border: 1px solid rgba(27,31,35,.2); - border-radius: 3px; - background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%); - margin-left: 4px; - font-weight: 600; - } - - .github-star-badge:hover { - background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%); - border-color: rgba(27,31,35,.35); - background-position: -.5em; - } - .github-star-badge .material-icons { - height: 16px; - width: 16px; - margin-right: 4px; - } - `, - sass: ` -/* - * Remove template code below - */ -\:host - display: block - font-family: sans-serif - min-width: 300px - max-width: 600px - margin: 50px auto -.gutter-left - margin-left: 9px -.col-span-2 - grid-column: span 2 -.flex - display: flex - align-items: center - justify-content: center -header - background-color: #143055 - color: white - padding: 5px - border-radius: 3px -main - padding: 0 36px -p - text-align: center -h1 - text-align: center - margin-left: 18px - font-size: 24px -h2 - text-align: center - font-size: 20px - margin: 40px 0 10px 0 -.resources - text-align: center - list-style: none - padding: 0 - display: grid - grid-gap: 9px - grid-template-columns: 1fr 1fr -.resource - color: #0094ba - height: 36px - background-color: rgba(0, 0, 0, 0) - border: 1px solid rgba(0, 0, 0, 0.12) - border-radius: 4px - padding: 3px 9px - text-decoration: none - &:hover - background-color: rgba(68, 138, 255, 0.04) -pre - padding: 9px - border-radius: 4px - background-color: black - color: #eee -details - border-radius: 4px - color: #333 - background-color: rgba(0, 0, 0, 0) - border: 1px solid rgba(0, 0, 0, 0.12) - padding: 3px 9px - margin-bottom: 9px -summary - cursor: pointer - outline: none - height: 36px - line-height: 36px -.github-star-container - margin-top: 12px - line-height: 20px - a - display: flex - align-items: center - text-decoration: none - color: #333 -.github-star-badge - color: #24292e - display: flex - align-items: center - font-size: 12px - padding: 3px 10px - border: 1px solid rgba(27, 31, 35, .2) - border-radius: 3px - background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%) - margin-left: 4px - font-weight: 600 - &:hover - background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%) - border-color: rgba(27, 31, 35, .35) - background-position: -.5em - .material-icons - height: 16px - width: 16px - margin-right: 4px + + +

    + + `, }; diff --git a/packages/angular/src/generators/application/lib/update-component-template.ts b/packages/angular/src/generators/application/lib/update-app-component-template.ts similarity index 76% rename from packages/angular/src/generators/application/lib/update-component-template.ts rename to packages/angular/src/generators/application/lib/update-app-component-template.ts index 049b06f6400f2..2ec7041167d0c 100644 --- a/packages/angular/src/generators/application/lib/update-component-template.ts +++ b/packages/angular/src/generators/application/lib/update-app-component-template.ts @@ -7,10 +7,15 @@ import { getDecoratorPropertyValueNode } from '../../../utils/nx-devkit/ast-util import { nrwlHomeTemplate } from './nrwl-home-tpl'; -export function updateComponentTemplate(host: Tree, options: NormalizedSchema) { +export function updateAppComponentTemplate( + host: Tree, + options: NormalizedSchema +) { const content = options.routing - ? `${nrwlHomeTemplate.html}\n` - : nrwlHomeTemplate.html; + ? `${nrwlHomeTemplate.getSelector( + options.prefix + )}\n` + : nrwlHomeTemplate.getSelector(options.prefix); if (!options.inlineTemplate) { host.write(`${options.appProjectRoot}/src/app/app.component.html`, content); @@ -38,6 +43,6 @@ export function updateComponentTemplate(host: Tree, options: NormalizedSchema) { ), componentPath, templateNodeValue, - `\`\n${nrwlHomeTemplate.html}\n\`` + `\`\n${nrwlHomeTemplate.getSelector(options.prefix)}\n\`` ); } diff --git a/packages/angular/src/generators/application/lib/update-component-spec.ts b/packages/angular/src/generators/application/lib/update-component-spec.ts index 071b6388a68a1..1e598540e9f8a 100644 --- a/packages/angular/src/generators/application/lib/update-component-spec.ts +++ b/packages/angular/src/generators/application/lib/update-component-spec.ts @@ -3,7 +3,10 @@ import type { NormalizedSchema } from './normalized-schema'; import * as ts from 'typescript'; import { insertImport } from '@nrwl/workspace/src/utilities/ast-utils'; -import { addImportToTestBed } from '../../../utils/nx-devkit/ast-utils'; +import { + addImportToTestBed, + replaceIntoToTestBed, +} from '../../../utils/nx-devkit/ast-utils'; export function updateComponentSpec(host: Tree, options: NormalizedSchema) { if (options.skipTests !== true) { @@ -21,10 +24,28 @@ export function updateComponentSpec(host: Tree, options: NormalizedSchema) { componentSpecPath, componentSpecSource .replace('.content span', 'h1') - .replace( - `${options.name} app is running!`, - `Welcome to ${options.name}!` - ) + .replace(`${options.name} app is running!`, `Welcome ${options.name}`) + ); + + // Adding NxWelcome component to app.component.spec + componentSpecSourceFile = insertImport( + host, + componentSpecSourceFile, + componentSpecPath, + 'NxWelcomeComponent', + './nx-welcome.component' + ); + + componentSpecSourceFile = replaceIntoToTestBed( + host, + componentSpecSourceFile, + componentSpecPath, + `declarations: [AppComponent, NxWelcomeComponent]`, + ` + declarations: [ + AppComponent + ], + ` ); if (options.routing) { diff --git a/packages/angular/src/generators/application/lib/update-component-styles.ts b/packages/angular/src/generators/application/lib/update-component-styles.ts deleted file mode 100644 index d5f1cd1fd8487..0000000000000 --- a/packages/angular/src/generators/application/lib/update-component-styles.ts +++ /dev/null @@ -1,47 +0,0 @@ -import type { Tree } from '@nrwl/devkit'; -import type { NormalizedSchema } from './normalized-schema'; - -import * as ts from 'typescript'; -import { replaceNodeValue } from '@nrwl/workspace/src/utilities/ast-utils'; -import { getDecoratorPropertyValueNode } from '../../../utils/nx-devkit/ast-utils'; - -import { nrwlHomeTemplate } from './nrwl-home-tpl'; - -export function updateComponentStyles(host: Tree, options: NormalizedSchema) { - const content = nrwlHomeTemplate[options.style === 'sass' ? 'sass' : 'css']; - - if (!options.inlineStyle) { - const filesMap = { - css: `${options.appProjectRoot}/src/app/app.component.css`, - sass: `${options.appProjectRoot}/src/app/app.component.sass`, - scss: `${options.appProjectRoot}/src/app/app.component.scss`, - less: `${options.appProjectRoot}/src/app/app.component.less`, - }; - host.write(filesMap[options.style], content); - - return; - } - - // Inline component update - const componentPath = `${options.appProjectRoot}/src/app/app.component.ts`; - const templateNodeValue = getDecoratorPropertyValueNode( - host, - componentPath, - 'Component', - 'styles', - '@angular/core' - ); - - replaceNodeValue( - host, - ts.createSourceFile( - componentPath, - host.read(componentPath, 'utf-8'), - ts.ScriptTarget.Latest, - true - ), - componentPath, - templateNodeValue, - `[\`\n${content}\n\`],\n` - ); -} diff --git a/packages/angular/src/generators/application/lib/update-e2e-project.ts b/packages/angular/src/generators/application/lib/update-e2e-project.ts index 518b6584565c4..90a1df3996bab 100644 --- a/packages/angular/src/generators/application/lib/update-e2e-project.ts +++ b/packages/angular/src/generators/application/lib/update-e2e-project.ts @@ -15,7 +15,7 @@ export function updateE2eProject(tree: Tree, options: NormalizedSchema) { spec, content.replace( `${options.name} app is running!`, - `Welcome to ${options.name}!` + `Welcome ${options.name}` ) ); diff --git a/packages/angular/src/generators/application/lib/update-nx-component-template.ts b/packages/angular/src/generators/application/lib/update-nx-component-template.ts new file mode 100644 index 0000000000000..a56564c07fd03 --- /dev/null +++ b/packages/angular/src/generators/application/lib/update-nx-component-template.ts @@ -0,0 +1,66 @@ +import type { Tree } from '@nrwl/devkit'; +import type { NormalizedSchema } from './normalized-schema'; + +import * as ts from 'typescript'; +import { + addGlobal, + replaceNodeValue, +} from '@nrwl/workspace/src/utilities/ast-utils'; +import { getDecoratorPropertyValueNode } from '../../../utils/nx-devkit/ast-utils'; +import { nrwlHomeTemplate } from './nrwl-home-tpl'; + +export function updateNxComponentTemplate( + host: Tree, + options: NormalizedSchema +) { + const componentPath = `${options.appProjectRoot}/src/app/nx-welcome.component.ts`; + const templateNodeValue = getDecoratorPropertyValueNode( + host, + componentPath, + 'Component', + 'template', + '@angular/core' + ); + + replaceNodeValue( + host, + ts.createSourceFile( + componentPath, + host.read(componentPath, 'utf-8'), + ts.ScriptTarget.Latest, + true + ), + componentPath, + templateNodeValue, + `\`\n${nrwlHomeTemplate.template(options.name)}\n\`` + ); + + // Fixing extra comma issue `,,` + let sourceFile = ts.createSourceFile( + componentPath, + host.read(componentPath, 'utf-8'), + ts.ScriptTarget.Latest, + true + ); + const componentFile = host + .read(componentPath, 'utf-8') + .toString() + .replace(/,,/gi, ','); + host.write(componentPath, componentFile); + sourceFile.update(componentFile, { + newLength: componentFile.length, + span: { + length: sourceFile.text.length, + start: 0, + }, + }); + + // Add ESLint ignore to pass the lint step + sourceFile = ts.createSourceFile( + componentPath, + host.read(componentPath, 'utf-8'), + ts.ScriptTarget.Latest, + true + ); + addGlobal(host, sourceFile, componentPath, '/* eslint-disable */'); +} diff --git a/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap b/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap index 6a75242840298..7e4a0960e7d15 100644 --- a/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap +++ b/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap @@ -5,11 +5,13 @@ exports[`Init MFE should add a remote application and add it to a specified host import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; +import { NxWelcomeComponent } from './nx-welcome.component'; import { RouterModule } from '@angular/router'; @NgModule({ declarations: [ - AppComponent + AppComponent, + NxWelcomeComponent ], imports: [ BrowserModule, diff --git a/packages/angular/src/utils/nx-devkit/ast-utils.ts b/packages/angular/src/utils/nx-devkit/ast-utils.ts index ce30d76c6e737..7af6480af255f 100644 --- a/packages/angular/src/utils/nx-devkit/ast-utils.ts +++ b/packages/angular/src/utils/nx-devkit/ast-utils.ts @@ -7,6 +7,7 @@ import { insertChange, removeChange, getImport, + replaceChange, } from '@nrwl/workspace/src/utilities/ast-utils'; function _angularImportsFromNode( @@ -344,6 +345,80 @@ export function addImportToTestBed( return source; } +export function addDeclarationsToTestBed( + host: Tree, + source: ts.SourceFile, + specPath: string, + symbolName: string[] +): ts.SourceFile { + const allCalls: ts.CallExpression[] = ( + findNodes(source, ts.SyntaxKind.CallExpression) + ); + + const configureTestingModuleObjectLiterals = allCalls + .filter((c) => c.expression.kind === ts.SyntaxKind.PropertyAccessExpression) + .filter( + (c: any) => c.expression.name.getText(source) === 'configureTestingModule' + ) + .map((c) => + c.arguments[0].kind === ts.SyntaxKind.ObjectLiteralExpression + ? c.arguments[0] + : null + ); + + if (configureTestingModuleObjectLiterals.length > 0) { + const startPosition = configureTestingModuleObjectLiterals[0] + .getFirstToken(source) + .getEnd(); + return insertChange( + host, + source, + specPath, + startPosition, + `declarations: [${symbolName.join(',')}], ` + ); + } + return source; +} + +export function replaceIntoToTestBed( + host: Tree, + source: ts.SourceFile, + specPath: string, + newSymbol: string, + previousSymbol: string +): ts.SourceFile { + const allCalls: ts.CallExpression[] = ( + findNodes(source, ts.SyntaxKind.CallExpression) + ); + + const configureTestingModuleObjectLiterals = allCalls + .filter((c) => c.expression.kind === ts.SyntaxKind.PropertyAccessExpression) + .filter( + (c: any) => c.expression.name.getText(source) === 'configureTestingModule' + ) + .map((c) => + c.arguments[0].kind === ts.SyntaxKind.ObjectLiteralExpression + ? c.arguments[0] + : null + ); + + if (configureTestingModuleObjectLiterals.length > 0) { + const startPosition = configureTestingModuleObjectLiterals[0] + .getFirstToken(source) + .getEnd(); + return replaceChange( + host, + source, + specPath, + startPosition, + newSymbol, + previousSymbol + ); + } + return source; +} + export function getBootstrapComponent( source: ts.SourceFile, moduleClassName: string diff --git a/packages/cypress/src/generators/cypress-project/files/src/integration/app.spec.ts__tmpl__ b/packages/cypress/src/generators/cypress-project/files/src/integration/app.spec.ts__tmpl__ index 2ebbb53a9bae0..36f5a5cc48b4d 100644 --- a/packages/cypress/src/generators/cypress-project/files/src/integration/app.spec.ts__tmpl__ +++ b/packages/cypress/src/generators/cypress-project/files/src/integration/app.spec.ts__tmpl__ @@ -8,6 +8,6 @@ describe('<%= project %>', () => { cy.login('my-email@something.com', 'myPassword'); // Function helper example, see `../support/app.po.ts` file - getGreeting().contains('Welcome to <%= project %>!'); + getGreeting().contains('Welcome <%= project %>'); }); }); diff --git a/packages/gatsby/src/generators/application/files/src/pages/index.module.__style__ b/packages/gatsby/src/generators/application/files/src/pages/index.module.__style__ index 756d4bb08ff46..9b051a2744d5b 100644 --- a/packages/gatsby/src/generators/application/files/src/pages/index.module.__style__ +++ b/packages/gatsby/src/generators/application/files/src/pages/index.module.__style__ @@ -1,132 +1,401 @@ /* * Remove template code below */ - -.page { - font-family: sans-serif; - min-width: 300px; - max-width: 600px; - margin: 50px auto; +:global(html) { + -webkit-text-size-adjust: 100%; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + line-height: 1.5; + tab-size: 4; + scroll-behavior: smooth; } - -.page :global(.gutter-left) { - margin-left: 9px; +:global(body) { + font-family: inherit; + line-height: inherit; + margin: 0; } - -.page :global(.col-span-2) { - grid-column: span 2; +:global(h1), +:global(h2), +:global(p), +:global(pre) { + margin: 0; } - -.page :global(.flex) { - display: flex; - align-items: center; - justify-content: center; +:global(*), +:global(::before), +:global(::after) { + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: currentColor; } - -.page :global(header) { - background-color: #143055; - color: white; - padding: 5px; - border-radius: 3px; +:global(h1), +:global(h2) { + font-size: inherit; + font-weight: inherit; } - -.page :global(main) { - padding: 0 36px; +:global(a) { + color: inherit; + text-decoration: inherit; } - -.page :global(p) { - text-align: center; +:global(pre) { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + 'Liberation Mono', 'Courier New', monospace; } - -.page :global(h1) { - text-align: center; - margin-left: 18px; - font-size: 24px; +:global(svg) { + display: block; + vertical-align: middle; + shape-rendering: auto; + text-rendering: optimizeLegibility; } - -.page :global(h2) { - text-align: center; - font-size: 20px; - margin: 40px 0 10px 0; +:global(pre) { + background-color: rgba(55, 65, 81, 1); + border-radius: 0.25rem; + color: rgba(229, 231, 235, 1); + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + 'Liberation Mono', 'Courier New', monospace; + overflow: scroll; + padding: 0.5rem 0.75rem; } -.page :global(.resources) { - text-align: center; - list-style: none; - padding: 0; +:global(.shadow) { + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} +:global(.rounded) { + border-radius: 1.5rem; +} +:global(.wrapper) { + width: 100%; +} +:global(.container) { + margin-left: auto; + margin-right: auto; + max-width: 768px; + padding-bottom: 3rem; + padding-left: 1rem; + padding-right: 1rem; + color: rgba(55, 65, 81, 1); + width: 100%; +} +:global(#welcome) { + margin-top: 2.5rem; +} +:global(#welcome h1) { + font-size: 3rem; + font-weight: 500; + letter-spacing: -0.025em; + line-height: 1; +} +:global(#welcome span) { + display: block; + font-size: 1.875rem; + font-weight: 300; + line-height: 2.25rem; + margin-bottom: 0.5rem; +} +:global(#hero) { + align-items: center; + background-color: hsla(214, 62%, 21%, 1); + border: none; + box-sizing: border-box; + color: rgba(55, 65, 81, 1); display: grid; - grid-gap: 9px; - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr; + margin-top: 3.5rem; } - -.page :global(.resource) { - color: #0094ba; - height: 36px; - background-color: rgba(0, 0, 0, 0); - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 3px 9px; - text-decoration: none; +:global(#hero .text-container) { + color: rgba(255, 255, 255, 1); + padding: 3rem 2rem; } - -.page :global(.resource:hover) { - background-color: rgba(68, 138, 255, 0.04); +:global(#hero .text-container h2) { + font-size: 1.5rem; + line-height: 2rem; + position: relative; } - -.page :global(pre) { - padding: 9px; - border-radius: 4px; - background-color: black; - color: #eee; +:global(#hero .text-container h2 svg) { + color: hsla(162, 47%, 50%, 1); + height: 2rem; + left: -0.25rem; + position: absolute; + top: 0; + width: 2rem; } - -.page :global(details) { - border-radius: 4px; - color: #333; - background-color: rgba(0, 0, 0, 0); - border: 1px solid rgba(0, 0, 0, 0.12); - padding: 3px 9px; - margin-bottom: 9px; +:global(#hero .text-container h2 span) { + margin-left: 2.5rem; } - -.page :global(summary) { - outline: none; - height: 36px; - line-height: 36px; +:global(#hero .text-container a) { + background-color: rgba(255, 255, 255, 1); + border-radius: 0.75rem; + color: rgba(55, 65, 81, 1); + display: inline-block; + margin-top: 1.5rem; + padding: 1rem 2rem; + text-decoration: inherit; } - -.page :global(.github-star-container) { - margin-top: 12px; - line-height: 20px; +:global(#hero .logo-container) { + display: none; + justify-content: center; + padding-left: 2rem; + padding-right: 2rem; } - -.page :global(.github-star-container a) { +:global(#hero .logo-container svg) { + color: rgba(255, 255, 255, 1); + width: 66.666667%; +} +:global(#middle-content) { + align-items: flex-start; + display: grid; + gap: 4rem; + grid-template-columns: 1fr; + margin-top: 3.5rem; +} +:global(#learning-materials) { + padding: 2.5rem 2rem; +} +:global(#learning-materials h2) { + font-weight: 500; + font-size: 1.25rem; + letter-spacing: -0.025em; + line-height: 1.75rem; + padding-left: 1rem; + padding-right: 1rem; +} +:global(.list-item-link) { + align-items: center; + border-radius: 0.75rem; display: flex; + margin-top: 1rem; + padding: 1rem; + transition-property: background-color, border-color, color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + width: 100%; +} +:global(.list-item-link svg:first-child) { + margin-right: 1rem; + height: 1.5rem; + transition-property: background-color, border-color, color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + width: 1.5rem; +} +:global(.list-item-link > span) { + flex-grow: 1; + font-weight: 400; + transition-property: background-color, border-color, color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +:global(.list-item-link > span > span) { + color: rgba(107, 114, 128, 1); + display: block; + flex-grow: 1; + font-size: 0.75rem; + font-weight: 300; + line-height: 1rem; + transition-property: background-color, border-color, color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +:global(.list-item-link svg:last-child) { + height: 1rem; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + width: 1rem; +} +:global(.list-item-link:hover) { + color: rgba(255, 255, 255, 1); + background-color: hsla(162, 47%, 50%, 1); +} +:global(.list-item-link:hover > span) {} +:global(.list-item-link:hover > span > span) { + color: rgba(243, 244, 246, 1); +} +:global(.list-item-link:hover svg:last-child) { + transform: translateX(0.25rem); +} +:global(#other-links) {} +:global(.button-pill) { + padding: 1.5rem 2rem; + transition-duration: 300ms; + transition-property: background-color, border-color, color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); align-items: center; - text-decoration: none; - color: #333; + display: flex; } - -.page :global(.github-star-badge) { - color: #24292e; +:global(.button-pill svg) { + transition-property: background-color, border-color, color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + flex-shrink: 0; + width: 3rem; +} +:global(.button-pill > span) { + letter-spacing: -0.025em; + font-weight: 400; + font-size: 1.125rem; + line-height: 1.75rem; + padding-left: 1rem; + padding-right: 1rem; +} +:global(.button-pill span span) { + display: block; + font-size: 0.875rem; + font-weight: 300; + line-height: 1.25rem; +} +:global(.button-pill:hover sv)g, +:global(.button-pill:hover) { + color: rgba(255, 255, 255, 1) !important; +} +:global(#nx-console:hover) { + background-color: rgba(0, 122, 204, 1); +} +:global(#nx-console svg) { + color: rgba(0, 122, 204, 1); +} +:global(#nx-repo:hover) { + background-color: rgba(24, 23, 23, 1); +} +:global(#nx-repo svg) { + color: rgba(24, 23, 23, 1); +} +:global(#nx-cloud) { + margin-bottom: 2rem; + margin-top: 2rem; + padding: 2.5rem 2rem; +} +:global(#nx-cloud > div) { + align-items: center; display: flex; +} +:global(#nx-cloud > div svg) { + border-radius: 0.375rem; + flex-shrink: 0; + width: 3rem; +} +:global(#nx-cloud > div h2) { + font-size: 1.125rem; + font-weight: 400; + letter-spacing: -0.025em; + line-height: 1.75rem; + padding-left: 1rem; + padding-right: 1rem; +} +:global(#nx-cloud > div h2 span) { + display: block; + font-size: 0.875rem; + font-weight: 300; + line-height: 1.25rem; +} +:global(#nx-cloud p) { + font-size: 1rem; + line-height: 1.5rem; + margin-top: 1rem; +} +:global(#nx-cloud pre) { + margin-top: 1rem; +} +:global(#nx-cloud a) { + color: rgba(107, 114, 128, 1); + display: block; + font-size: 0.875rem; + line-height: 1.25rem; + margin-top: 1.5rem; + text-align: right; +} +:global(#nx-cloud a:hover) { + text-decoration: underline; +} +:global(#commands) { + padding: 2.5rem 2rem; + margin-top: 3.5rem; +} +:global(#commands h2) { + font-size: 1.25rem; + font-weight: 400; + letter-spacing: -0.025em; + line-height: 1.75rem; + padding-left: 1rem; + padding-right: 1rem; +} +:global(#commands p) { + font-size: 1rem; + font-weight: 300; + line-height: 1.5rem; + margin-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; +} +:global(details) { align-items: center; - font-size: 12px; - padding: 3px 10px; - border: 1px solid rgba(27, 31, 35, 0.2); - border-radius: 3px; - background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%); - margin-left: 4px; - font-weight: 600; + display: flex; + margin-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + width: 100%; } - -.page :global(.github-star-badge:hover) { - background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%); - border-color: rgba(27, 31, 35, 0.35); - background-position: -0.5em; -} -.page :global(.github-star-badge .material-icons) { - height: 16px; - width: 16px; - margin-right: 4px; +:global(details pre > span) { + display: block; +} +:global(summary) { + border-radius: 0.5rem; + display: flex; + font-weight: 400; + padding: 0.5rem; + cursor: pointer; + transition-property: background-color, border-color, color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +:global(summary:hover) { + background-color: rgba(243, 244, 246, 1); +} +:global(summary svg) { + height: 1.5rem; + margin-right: 1rem; + width: 1.5rem; +} +:global(#love) { + color: rgba(107, 114, 128, 1); + font-size: 0.875rem; + line-height: 1.25rem; + margin-top: 3.5rem; + opacity: 0.6; + text-align: center; +} +:global(#love svg) { + color: rgba(252, 165, 165, 1); + width: 1.25rem; + height: 1.25rem; + display: inline; + margin-top: -0.25rem; +} +@media screen and (min-width: 768px) { + :global(#hero) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + :global(#hero .logo-container) { + display: flex; + } + :global(#middle-content) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } } diff --git a/packages/gatsby/src/generators/application/files/src/pages/index.none.tsx__tmpl__ b/packages/gatsby/src/generators/application/files/src/pages/index.none.tsx__tmpl__ index 53d15635192a2..74a679552c2b8 100644 --- a/packages/gatsby/src/generators/application/files/src/pages/index.none.tsx__tmpl__ +++ b/packages/gatsby/src/generators/application/files/src/pages/index.none.tsx__tmpl__ @@ -1,11 +1,816 @@ import React from 'react'; -import { ReactComponent as Logo } from './logo.svg'; -import star from './star.svg'; - export function Index() { return ( -

    Welcome to <%= projectName %>!

    + <> + - -
    - -

    Welcome to <%= projectName %>!

    -
    -
    -

    Resources & Tools

    -

    Thank you for using and showing some ♥ for Nx.

    -
    - - {' '} - If you like Nx, please give it a star: -
    - - Star -
    -     -
    -

    Here are some links to help you get started.

    - -

    Next Steps

    -

    Here are some things you can do with Nx.

    -
    - Add UI library - 
    {`# Generate UI lib
-nx g @nrwl/react:lib ui
-
-# Add a component
-nx g @nrwl/react:component xyz --project ui`}
    -
    -
    - View dependency graph - 
    {`nx dep-graph`}
    -
    -
    - Run affected commands - 
    {`# see what's been affected by changes
-nx affected:dep-graph
-
-# run tests for current changes
-nx affected:test
-
-# run e2e tests for current changes
-nx affected:e2e
-  `}
    -
    -
    - + <> + + + ); <% if (classComponent) { %> diff --git a/packages/react/src/generators/application/files/styled-module/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/styled-module/src/app/__fileName__.tsx__tmpl__ index 0a88ac5a9c734..2af30e84d856b 100644 --- a/packages/react/src/generators/application/files/styled-module/src/app/__fileName__.tsx__tmpl__ +++ b/packages/react/src/generators/application/files/styled-module/src/app/__fileName__.tsx__tmpl__ @@ -1,139 +1,11 @@ <% if (classComponent) { %> import { Component } from 'react'; <% } %> - import styled from '<%= styledModule %>'; - -import { ReactComponent as Logo } from './logo.svg'; -import star from './star.svg'; +import NxWelcome from "./nx-welcome"; const StyledApp = styled.div` - font-family: sans-serif; - min-width: 300px; - max-width: 600px; - margin: 50px auto; - - .gutter-left { - margin-left: 9px; - } - - .col-span-2 { - grid-column: span 2; - } - - .flex { - display: flex; - align-items: center; - justify-content: center; - } - - header { - background-color: #143055; - color: white; - padding: 5px; - border-radius: 3px; - } - - main { - padding: 0 36px; - } - - p { - text-align: center; - } - - h1 { - text-align: center; - margin-left: 18px; - font-size: 24px; - } - - h2 { - text-align: center; - font-size: 20px; - margin: 40px 0 10px 0; - } - - .resources { - text-align: center; - list-style: none; - padding: 0; - display: grid; - grid-gap: 9px; - grid-template-columns: 1fr 1fr; - } - - .resource { - color: #0094ba; - height: 36px; - background-color: rgba(0, 0, 0, 0); - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 3px 9px; - text-decoration: none; - } - - .resource:hover { - background-color: rgba(68, 138, 255, 0.04); - } - - pre { - padding: 9px; - border-radius: 4px; - background-color: black; - color: #eee; - } - - details { - border-radius: 4px; - color: #333; - background-color: rgba(0, 0, 0, 0); - border: 1px solid rgba(0, 0, 0, 0.12); - padding: 3px 9px; - margin-bottom: 9px; - } - - summary { - outline: none; - height: 36px; - line-height: 36px; - } - - .github-star-container { - margin-top: 12px; - line-height: 20px; - } - - .github-star-container a { - display: flex; - align-items: center; - text-decoration: none; - color: #333; - } - - .github-star-badge { - color: #24292e; - display: flex; - align-items: center; - font-size: 12px; - padding: 3px 10px; - border: 1px solid rgba(27, 31, 35, 0.2); - border-radius: 3px; - background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%); - margin-left: 4px; - font-weight: 600; - } - - .github-star-badge:hover { - background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%); - border-color: rgba(27, 31, 35, 0.35); - background-position: -0.5em; - } - .github-star-badge .material-icons { - height: 16px; - width: 16px; - margin-right: 4px; - } + // Your style here `; <% if (classComponent) { %> @@ -143,84 +15,11 @@ export class App extends Component { export function App() { <% } %> return ( - -
    - -

    Welcome to <%= projectName %>!

    -
    -
    -

    Resources & Tools

    -

    - Thank you for using and showing some ♥ for Nx. -

    - -

    - Here are some links to help you get started. -

    - -

    Next Steps

    -

    - Here are some things you can do with Nx. -

    -
    - Add UI library - 
    {`# Generate UI lib
-nx g @nrwl/react:lib ui
-
-# Add a component
-nx g @nrwl/react:component xyz --project ui`}
    -
    -
    - View dependency graph - 
    {`nx dep-graph`}
    -
    -
    - Run affected commands - 
    {`# see what's been affected by changes
-nx affected:dep-graph
-
-# run tests for current changes
-nx affected:test
-
-# run e2e tests for current changes
-nx affected:e2e
-  `}
    -
    -
    -     + <> + + + + ); <% if (classComponent) { %> } diff --git a/packages/react/src/generators/stories/stories-app.spec.ts b/packages/react/src/generators/stories/stories-app.spec.ts index 8fe5bf3d52bdb..da628f0a613d3 100644 --- a/packages/react/src/generators/stories/stories-app.spec.ts +++ b/packages/react/src/generators/stories/stories-app.spec.ts @@ -42,7 +42,7 @@ describe('react:stories for applications', () => { }); expect( - appTree.exists('apps/test-ui-app/src/app/app.stories.tsx') + appTree.exists('apps/test-ui-app/src/app/nx-welcome.stories.tsx') ).toBeTruthy(); expect( appTree.exists( @@ -82,7 +82,7 @@ describe('react:stories for applications', () => { // should just create the story and not error, even though there's a js file // not containing any react component expect( - appTree.exists('apps/test-ui-app/src/app/app.stories.tsx') + appTree.exists('apps/test-ui-app/src/app/nx-welcome.stories.tsx') ).toBeTruthy(); }); }); diff --git a/packages/web/src/generators/application/application.spec.ts b/packages/web/src/generators/application/application.spec.ts index f5baf0cb4e3b7..3a1e2afc7ade9 100644 --- a/packages/web/src/generators/application/application.spec.ts +++ b/packages/web/src/generators/application/application.spec.ts @@ -221,7 +221,7 @@ describe('app', () => { ).toBeTruthy(); expect( tree.read('apps/my-dir/my-app/src/app/app.element.ts', 'utf-8') - ).toContain('Thank you for using and showing some ♥ for Nx.'); + ).toContain('Hello there'); }); }); diff --git a/packages/web/src/generators/application/files/app/src/app/app.element.__style__ b/packages/web/src/generators/application/files/app/src/app/app.element.__style__ index 3b63d4dbd7f58..e033890e43cf0 100644 --- a/packages/web/src/generators/application/files/app/src/app/app.element.__style__ +++ b/packages/web/src/generators/application/files/app/src/app/app.element.__style__ @@ -1,133 +1,416 @@ /* * Remove template code below */ -body > *:first-child { - display: block; - font-family: sans-serif; - min-width: 300px; - max-width: 600px; - margin: 50px auto; -} + html { + -webkit-text-size-adjust: 100%; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + line-height: 1.5; + tab-size: 4; + scroll-behavior: smooth; + } + body { + font-family: inherit; + line-height: inherit; + margin: 0; + } + h1, + h2, + p, + pre { + margin: 0; + } + *, + ::before, + ::after { + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: currentColor; + } + h1, + h2 { + font-size: inherit; + font-weight: inherit; + } + a { + color: inherit; + text-decoration: inherit; + } + pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + 'Liberation Mono', 'Courier New', monospace; + } + svg { + display: block; + vertical-align: middle; + } -.gutter-left { - margin-left: 9px; -} + svg { + shape-rendering: auto; + text-rendering: optimizeLegibility; + } + pre { + background-color: rgba(55, 65, 81, 1); + border-radius: 0.25rem; + color: rgba(229, 231, 235, 1); + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + 'Liberation Mono', 'Courier New', monospace; + overflow: scroll; + padding: 0.5rem 0.75rem; + } -.col-span-2 { - grid-column: span 2; -} + .shadow { + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); + } + .rounded { + border-radius: 1.5rem; + } -.flex { - display: flex; - align-items: center; - justify-content: center; -} + .wrapper { + width: 100%; + } + .container { + margin-left: auto; + margin-right: auto; + max-width: 768px; + padding-bottom: 3rem; + padding-left: 1rem; + padding-right: 1rem; + color: rgba(55, 65, 81, 1); + width: 100%; + } + #welcome { + margin-top: 2.5rem; + } + #welcome h1 { + font-size: 3rem; + font-weight: 500; + letter-spacing: -0.025em; + line-height: 1; + } + #welcome span { + display: block; + font-size: 1.875rem; + font-weight: 300; + line-height: 2.25rem; + margin-bottom: 0.5rem; + } + #hero { + align-items: center; + background-color: hsla(214, 62%, 21%, 1); + border: none; + box-sizing: border-box; + color: rgba(55, 65, 81, 1); + display: grid; + grid-template-columns: 1fr; + margin-top: 3.5rem; + } + #hero .text-container { + color: rgba(255, 255, 255, 1); + padding: 3rem 2rem; + } + #hero .text-container h2 { + font-size: 1.5rem; + line-height: 2rem; + position: relative; + } + #hero .text-container h2 svg { + color: hsla(162, 47%, 50%, 1); + height: 2rem; + left: -0.25rem; + position: absolute; + top: 0; + width: 2rem; + } + #hero .text-container h2 span { + margin-left: 2.5rem; + } + #hero .text-container a { + background-color: rgba(255, 255, 255, 1); + border-radius: 0.75rem; + color: rgba(55, 65, 81, 1); + display: inline-block; + margin-top: 1.5rem; + padding: 1rem 2rem; + text-decoration: inherit; + } + #hero .logo-container { + display: none; + justify-content: center; + padding-left: 2rem; + padding-right: 2rem; + } + #hero .logo-container svg { + color: rgba(255, 255, 255, 1); + width: 66.666667%; + } -header { - background-color: #143055; - color: white; - padding: 5px; - border-radius: 3px; -} + #middle-content { + align-items: flex-start; + display: grid; + gap: 4rem; + grid-template-columns: 1fr; + margin-top: 3.5rem; + } -main { - padding: 0 36px; -} + #learning-materials { + padding: 2.5rem 2rem; + } + #learning-materials h2 { + font-weight: 500; + font-size: 1.25rem; + letter-spacing: -0.025em; + line-height: 1.75rem; + padding-left: 1rem; + padding-right: 1rem; + } + .list-item-link { + align-items: center; + border-radius: 0.75rem; + display: flex; + margin-top: 1rem; + padding: 1rem; + transition-property: background-color, border-color, color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + width: 100%; + } + .list-item-link svg:first-child { + margin-right: 1rem; + height: 1.5rem; + transition-property: background-color, border-color, color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + width: 1.5rem; + } + .list-item-link > span { + flex-grow: 1; + font-weight: 400; + transition-property: background-color, border-color, color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } + .list-item-link > span > span { + color: rgba(107, 114, 128, 1); + display: block; + flex-grow: 1; + font-size: 0.75rem; + font-weight: 300; + line-height: 1rem; + transition-property: background-color, border-color, color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } + .list-item-link svg:last-child { + height: 1rem; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + width: 1rem; + } + .list-item-link:hover { + color: rgba(255, 255, 255, 1); + background-color: hsla(162, 47%, 50%, 1); + } + .list-item-link:hover > span { + } + .list-item-link:hover > span > span { + color: rgba(243, 244, 246, 1); + } + .list-item-link:hover svg:last-child { + transform: translateX(0.25rem); + } -p { - text-align: center; -} + #other-links { + } + .button-pill { + padding: 1.5rem 2rem; + transition-duration: 300ms; + transition-property: background-color, border-color, color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + align-items: center; + display: flex; + } + .button-pill svg { + transition-property: background-color, border-color, color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + flex-shrink: 0; + width: 3rem; + } + .button-pill > span { + letter-spacing: -0.025em; + font-weight: 400; + font-size: 1.125rem; + line-height: 1.75rem; + padding-left: 1rem; + padding-right: 1rem; + } + .button-pill span span { + display: block; + font-size: 0.875rem; + font-weight: 300; + line-height: 1.25rem; + } + .button-pill:hover svg, + .button-pill:hover { + color: rgba(255, 255, 255, 1) !important; + } + #nx-console:hover { + background-color: rgba(0, 122, 204, 1); + } + #nx-console svg { + color: rgba(0, 122, 204, 1); + } -h1 { - text-align: center; - margin-left: 18px; - font-size: 24px; -} + #nx-repo:hover { + background-color: rgba(24, 23, 23, 1); + } + #nx-repo svg { + color: rgba(24, 23, 23, 1); + } -h2 { - text-align: center; - font-size: 20px; - margin: 40px 0 10px 0; -} + #nx-cloud { + margin-bottom: 2rem; + margin-top: 2rem; + padding: 2.5rem 2rem; + } + #nx-cloud > div { + align-items: center; + display: flex; + } + #nx-cloud > div svg { + border-radius: 0.375rem; + flex-shrink: 0; + width: 3rem; + } + #nx-cloud > div h2 { + font-size: 1.125rem; + font-weight: 400; + letter-spacing: -0.025em; + line-height: 1.75rem; + padding-left: 1rem; + padding-right: 1rem; + } + #nx-cloud > div h2 span { + display: block; + font-size: 0.875rem; + font-weight: 300; + line-height: 1.25rem; + } + #nx-cloud p { + font-size: 1rem; + line-height: 1.5rem; + margin-top: 1rem; + } + #nx-cloud pre { + margin-top: 1rem; + } + #nx-cloud a { + color: rgba(107, 114, 128, 1); + display: block; + font-size: 0.875rem; + line-height: 1.25rem; + margin-top: 1.5rem; + text-align: right; + } + #nx-cloud a:hover { + text-decoration: underline; + } -.resources { - text-align: center; - list-style: none; - padding: 0; - display: grid; - grid-gap: 9px; - grid-template-columns: 1fr 1fr; -} + #commands { + padding: 2.5rem 2rem; -.resource { - color: #0094ba; - height: 36px; - background-color: rgba(0, 0, 0, 0); - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 3px 9px; - text-decoration: none; -} + margin-top: 3.5rem; + } + #commands h2 { + font-size: 1.25rem; + font-weight: 400; + letter-spacing: -0.025em; + line-height: 1.75rem; + padding-left: 1rem; + padding-right: 1rem; + } + #commands p { + font-size: 1rem; + font-weight: 300; + line-height: 1.5rem; + margin-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + } + details { + align-items: center; + display: flex; + margin-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + width: 100%; + } + details pre > span { + color: rgba(181, 181, 181, 1); + } + summary { + border-radius: 0.5rem; + display: flex; + font-weight: 400; + padding: 0.5rem; + cursor: pointer; + transition-property: background-color, border-color, color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } + summary:hover { + background-color: rgba(243, 244, 246, 1); + } + summary svg { + height: 1.5rem; + margin-right: 1rem; + width: 1.5rem; + } -.resource:hover { - background-color: rgba(68, 138, 255, 0.04); -} + #love { + color: rgba(107, 114, 128, 1); + font-size: 0.875rem; + line-height: 1.25rem; + margin-top: 3.5rem; + opacity: 0.6; + text-align: center; + } + #love svg { + color: rgba(252, 165, 165, 1); + width: 1.25rem; + height: 1.25rem; + display: inline; + margin-top: -0.25rem; + } -pre { - padding: 9px; - border-radius: 4px; - background-color: black; - color: #eee; -} - -details { - border-radius: 4px; - color: #333; - background-color: rgba(0, 0, 0, 0); - border: 1px solid rgba(0, 0, 0, 0.12); - padding: 3px 9px; - margin-bottom: 9px; -} - -summary { - cursor: pointer; - outline: none; - height: 36px; - line-height: 36px; -} - -.github-star-container { - margin-top: 12px; - line-height: 20px; -} - -.github-star-container a { - display: flex; - align-items: center; - text-decoration: none; - color: #333; -} - -.github-star-badge { - color: #24292e; - display: flex; - align-items: center; - font-size: 12px; - padding: 3px 10px; - border: 1px solid rgba(27,31,35,.2); - border-radius: 3px; - background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%); - margin-left: 4px; - font-weight: 600; -} - -.github-star-badge:hover { - background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%); - border-color: rgba(27,31,35,.35); - background-position: -.5em; -} -.github-star-badge .material-icons { - height: 16px; - width: 16px; - margin-right: 4px; -} + @media screen and (min-width: 768px) { + #hero { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + #hero .logo-container { + display: flex; + } + #middle-content { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } diff --git a/packages/web/src/generators/application/files/app/src/app/app.element.spec.ts__tmpl__ b/packages/web/src/generators/application/files/app/src/app/app.element.spec.ts__tmpl__ index 09b331189af0b..8f8178a21b2c6 100644 --- a/packages/web/src/generators/application/files/app/src/app/app.element.spec.ts__tmpl__ +++ b/packages/web/src/generators/application/files/app/src/app/app.element.spec.ts__tmpl__ @@ -14,8 +14,8 @@ describe('AppElement', () => { it('should have a greeting', () => { app.connectedCallback(); - expect(app.querySelector('h1').innerHTML).toEqual( - 'Welcome to <%= projectName %>!' + expect(app.querySelector('h1').innerHTML).toContain( + 'Welcome <%= projectName %>' ); }); }); diff --git a/packages/web/src/generators/application/files/app/src/app/app.element.ts__tmpl__ b/packages/web/src/generators/application/files/app/src/app/app.element.ts__tmpl__ index f483b2ba62bbc..0ccf6a8920f8b 100644 --- a/packages/web/src/generators/application/files/app/src/app/app.element.ts__tmpl__ +++ b/packages/web/src/generators/application/files/app/src/app/app.element.ts__tmpl__ @@ -8,88 +8,378 @@ export class AppElement extends HTMLElement { connectedCallback() { const title = '<%= projectName %>'; this.innerHTML = ` -
    - -

    Welcome to ${title}!

    -
    -
    -

    Resources & Tools

    -

    - Thank you for using and showing some ♥ for Nx. -

    -
    - If you like Nx, please give it a star: -
    - - Star -
    -     +
    +
    + +
    +

    + Hello there, + Welcome ${title} 👋 +

    -

    - Here are some links to help you get started. -

    - -

    Next Steps

    -

    Here are some things you can do with Nx.

    -
    - Add UI library - 
    -\`# Generate UI lib
-nx g @nrwl/web:lib ui
+            
+              
+                
+                
+                
+              
+              
+                Video courses
+                 Nx custom courses 
+              
+              
+                
+              
+            
+
    + +
    -# Add a component -nx g @nrwl/web:component xyz --project ui\` - - -
    - View dependency graph - 
    \`nx dep-graph\`
    -
    -
    - Run affected commands - 
    -\`# see what's been affected by changes
+        
+        
    
+          
    Next steps
    
+          
    Here are some things you can do with Nx:
    
+          
    
+            
+              
+                
+              
+              Add UI library
+            
+            
    # Generate UI lib
+nx g @nrwl/angular:lib ui
+
+# Add a component
+nx g @nrwl/angular:component button --project ui
    
+          
    
+          
    
+            
+              
+                
+              
+              View interactive dependency graph
+            
+            
    nx dep-graph
    
+          
    
+          
    
+            
+              
+                
+              
+              Run affected commands
+            
+            
    # see what's been affected by changes
 nx affected:dep-graph
 
-# run tests for current changes
+# run tests for current changes
 nx affected:test
 
-# run e2e tests for current changes
-nx affected:e2e\`
-          
    
-        
    
-
    `; +# run e2e tests for current changes +nx affected:e2e + + + +

    + Carefully crafted with + + + +

    + + + `; } } customElements.define('<%= prefix %>-root', AppElement);