@smapiot/pilet-template-angular 0.15.0-beta.4440

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@smapiot/pilet-template-angular",
+  "version": "0.15.0-beta.4440",
+  "description": "Official scaffolding template for pilets: 'angular'.",
+  "keywords": [
+    "piral-cli",
+    "pilet",
+    "template",
+    "scaffold",
+    "boilerplate"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=12.0",
+    "piral": "0.15.x"
+  },
+  "templateOptions": {
+    "standalone": {
+      "description": "Defines if the pilet should include Angular - in case of the app shell not providing Angular already.",
+      "default": false,
+      "type": "boolean"
+    },
+    "ngVersion": {
+      "description": "Defines the (major) version of Angular to use in case of a standalone pilet.",
+      "default": 14,
+      "type": "number"
+    }
+  },
+  "author": "smapiot",
+  "homepage": "https://piral.io",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "src",
+    "templates"
+  ],
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/smapiot"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/smapiot/piral-templates.git"
+  },
+  "bugs": {
+    "url": "https://github.com/smapiot/piral-templates/issues"
+  },
+  "scripts": {
+    "build": "esbuild src/index.ts --bundle --outfile=./lib/index.js --platform=node",
+    "check": "tsc --noEmit",
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "devDependencies": {
+    "@smapiot/template-utils": "0.15.0-beta.4440"
+  },
+  "gitHead": "996f5885e2f799c182bde89a8971381ae6f7b19f"
+}

package/src/helpers.ts

@@ -0,0 +1,76 @@
+export function detectMode(piralInstance: { details: any }) {
+  const dependencies = piralInstance?.details?.dependencies || {};
+  const devDependencies = piralInstance?.details?.devDependencies || {};
+  const allDependencies = { ...devDependencies, ...dependencies };
+  return allDependencies['piral-ng'] === undefined;
+}
+
+export function detectNgVersion(piralInstance: { details: any }) {
+  const dependencies = piralInstance?.details?.dependencies || {};
+  const devDependencies = piralInstance?.details?.devDependencies || {};
+  const allDependencies = { ...devDependencies, ...dependencies };
+  const version = allDependencies['@angular/core'] || '14.0.0';
+
+  if (typeof version === 'string') {
+    const result = /\d+/.exec(version);
+
+    // Get major version
+    if (result) {
+      return +result[0];
+    }
+  }
+
+  return 14;
+}
+
+export function getStandalonePackageJson(cliVersion: string, ngVersion: string) {
+  return {
+    importmap: {
+      imports: {
+        '@angular/animations': '.',
+        '@angular/cli': '.',
+        '@angular/common': '.',
+        '@angular/compiler': '.',
+        '@angular/core': '.',
+        '@angular/forms': '.',
+        '@angular/platform-browser': '.',
+        '@angular/platform-browser-dynamic': '.',
+        '@angular/router': '.',
+      },
+    },
+    dependencies: {
+      '@angular/animations': ngVersion,
+      '@angular/cli': ngVersion,
+      '@angular/common': ngVersion,
+      '@angular/compiler': ngVersion,
+      '@angular/core': ngVersion,
+      '@angular/forms': ngVersion,
+      '@angular/platform-browser': ngVersion,
+      '@angular/platform-browser-dynamic': ngVersion,
+      '@angular/router': ngVersion,
+      'piral-ng': cliVersion,
+      rxjs: '~7.4',
+      'zone.js': '~0.11',
+    },
+    devDependencies: {
+      '@angular/compiler-cli': ngVersion,
+      '@ngtools/webpack': ngVersion,
+      'copy-webpack-plugin': '^10',
+      'html-loader': '^3',
+      'to-string-loader': '^1',
+    },
+  };
+}
+
+export function getStandardPackageJson(cliVersion: string, ngVersion: string) {
+  return {
+    devDependencies: {
+      '@angular/compiler-cli': ngVersion,
+      '@ngtools/webpack': ngVersion,
+      'copy-webpack-plugin': '^10',
+      'html-loader': '^3',
+      'to-string-loader': '^1',
+      'piral-ng': cliVersion,
+    },
+  };
+}

package/src/index.ts

@@ -0,0 +1,77 @@
+import { resolve } from 'path';
+import { createPiletTemplateFactory, getPiralInstance } from '@smapiot/template-utils';
+import { detectMode, detectNgVersion, getStandalonePackageJson, getStandardPackageJson } from './helpers';
+
+const root = resolve(__dirname, '..');
+
+interface AngularPiletArgs {
+  standalone: boolean;
+  ngVersion: number;
+}
+
+export default createPiletTemplateFactory<AngularPiletArgs>(root, (projectRoot, args, details) => {
+  const { sourceName } = args;
+  const piralInstance = getPiralInstance(projectRoot, sourceName);
+
+  if (typeof args.standalone === 'undefined') {
+    args.standalone = detectMode(piralInstance);
+  }
+
+  if (typeof args.ngVersion !== 'number') {
+    args.ngVersion = detectNgVersion(piralInstance);
+  }
+
+  const ngVersion = `^${args.ngVersion}`;
+  const packageJson = args.standalone
+    ? getStandalonePackageJson(details.cliVersion, ngVersion)
+    : getStandardPackageJson(details.cliVersion, ngVersion);
+
+  return [
+    {
+      languages: ['ts', 'js'],
+      name: 'package.json',
+      content: JSON.stringify(packageJson),
+      target: '<root>/package.json',
+    },
+    {
+      languages: ['ts', 'js'],
+      name: 'webpack.config.js',
+      target: '<root>/webpack.config.js',
+    },
+    {
+      languages: ['js'],
+      name: 'index.jsx',
+      target: '<src>/index.jsx',
+    },
+    {
+      languages: ['ts'],
+      name: 'app.module.ts',
+      target: '<src>/app/app.module.ts',
+    },
+    {
+      languages: ['ts'],
+      name: 'page.component.html',
+      target: '<src>/app/page.component.html',
+    },
+    {
+      languages: ['ts'],
+      name: 'page.component.css',
+      target: '<src>/app/page.component.css',
+    },
+    {
+      languages: ['ts'],
+      name: 'page.component.ts',
+      target: '<src>/app/page.component.ts',
+    },
+    {
+      languages: ['ts'],
+      name: 'index.tsx',
+      target: '<src>/index.tsx',
+    },
+    {
+      languages: ['ts'],
+      name: 'tsconfig.json',
+      target: '<root>/tsconfig.json',
+    },
+  ];
+});

package/templates/app.module.ejs

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { SharedModule } from 'piral-ng/common';
+
+import { PageComponent } from './page.component';
+
+@NgModule({
+	bootstrap: [PageComponent],
+	declarations: [PageComponent],
+	exports: [PageComponent],
+	imports: [BrowserModule, SharedModule]
+})
+export class AppModule {}

package/templates/index.jsx.ejs

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export function setup(app) {}

package/templates/index.tsx.ejs

@@ -0,0 +1,25 @@
+import * as React from 'react';
+<% if (standalone) { -%>
+import { defineNgModule, fromNg } from 'piral-ng/convert';
+<% } -%>
+import { AppModule } from './app/app.module';
+import { PageComponent } from './app/page.component';
+import type { PiletApi } from '<%- sourceName %>';
+
+export function setup(app: PiletApi) {
+<% if (standalone) { %>
+	app.defineNgModule(AppModule, {
+    // remove the following if you actually want to enable zone.js
+		ngZone: 'noop',
+	});
+
+  app.registerPage('/sample', app.fromNg(PageComponent));
+<% } else { %>
+	defineNgModule(AppModule, {
+    // remove the following if you actually want to enable zone.js
+		ngZone: 'noop',
+	});
+
+  app.registerPage('/sample', fromNg(PageComponent));
+<% } %>
+}

package/templates/page.component.css.ejs

@@ -0,0 +1,4 @@
+.welcome {
+  font-weight: bold;
+  color: green;
+}

package/templates/page.component.html.ejs

@@ -0,0 +1,3 @@
+<h1>Hello</h1>
+
+<p class="welcome">Welcome to your pilet's page powered by Angular.</p>

package/templates/page.component.ts.ejs

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+	styleUrls: ['./page.component.css'],
+	templateUrl: './page.component.html'
+})
+export class PageComponent {}

package/templates/tsconfig.json.ejs

@@ -0,0 +1,26 @@
+{
+	"angularCompilerOptions": {},
+  "compilerOptions": {
+    "declaration": true,
+    "noImplicitAny": false,
+    "removeComments": false,
+    "noLib": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es6",
+    "sourceMap": true,
+    "outDir": "./dist",
+    "skipLibCheck": true,
+    "lib": ["dom", "es2018"],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "jsx": "react",
+    "importHelpers": true
+  },
+  "include": [
+    "<%- src %>"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/templates/webpack.config.js.ejs

@@ -0,0 +1,9 @@
+const extendWebpack = require('piral-ng/extend-webpack');
+
+module.exports = (config) => {
+  return extendWebpack({
+    ngOptions: {
+      jitMode: true
+    }
+  })(config);
+};