create-ng-tailwind 3.1.0 → 4.0.0

package/lib/templates/base/linting.js

@@ -0,0 +1,359 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Create VS Code settings and extensions
+ */
+async function createVSCodeSettings(config) {
+  // Create .vscode directory
+  await fs.ensureDir(path.join(config.fullPath, '.vscode'));
+
+  // VSCode settings for format on save
+  const vscodeSettings = {
+    'editor.formatOnSave': true,
+    'editor.defaultFormatter': 'esbenp.prettier-vscode',
+    'editor.codeActionsOnSave': {
+      'source.fixAll.eslint': 'explicit',
+    },
+    '[typescript]': {
+      'editor.formatOnSave': true,
+      'editor.defaultFormatter': 'esbenp.prettier-vscode',
+    },
+    '[html]': {
+      'editor.formatOnSave': true,
+      'editor.defaultFormatter': 'esbenp.prettier-vscode',
+    },
+    '[css]': {
+      'editor.formatOnSave': true,
+      'editor.defaultFormatter': 'esbenp.prettier-vscode',
+    },
+    '[json]': {
+      'editor.formatOnSave': true,
+      'editor.defaultFormatter': 'esbenp.prettier-vscode',
+    },
+    '[jsonc]': {
+      'editor.formatOnSave': true,
+      'editor.defaultFormatter': 'esbenp.prettier-vscode',
+    },
+    'files.eol': '\n',
+    'files.trimTrailingWhitespace': true,
+    'files.insertFinalNewline': true,
+    'editor.tabSize': 2,
+    'prettier.requireConfig': false,
+    'eslint.validate': ['javascript', 'typescript', 'html'],
+    // Suppress CSS linting warnings for Tailwind CSS directives
+    'css.lint.unknownAtRules': 'ignore',
+  };
+
+  // VSCode extensions recommendations
+  const vscodeExtensions = {
+    recommendations: [
+      'esbenp.prettier-vscode',
+      'dbaeumer.vscode-eslint',
+      'angular.ng-template',
+      'bradlc.vscode-tailwindcss',
+    ],
+  };
+
+  // Write settings.json
+  await fs.writeFile(
+    path.join(config.fullPath, '.vscode/settings.json'),
+    JSON.stringify(vscodeSettings, null, 2)
+  );
+
+  // Write extensions.json
+  await fs.writeFile(
+    path.join(config.fullPath, '.vscode/extensions.json'),
+    JSON.stringify(vscodeExtensions, null, 2)
+  );
+}
+
+/**
+ * Update TypeScript config with path mappings
+ */
+async function updateTsConfig(config) {
+  // Define path mapping configuration
+  const pathMappingConfig = `    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"],
+      "@app/*": ["src/app/*"],
+      "@core/*": ["src/app/core/*"],
+      "@shared/*": ["src/app/shared/*"],
+      "@features/*": ["src/app/features/*"],
+      "@layout/*": ["src/app/layout/*"],
+      "@environments/*": ["src/environments/*"]
+    },`;
+
+  // Helper function to add path mappings to a tsconfig file
+  const addPathMappings = (content) => {
+    if (content.includes('"compilerOptions": {')) {
+      const compilerOptionsStart =
+        content.indexOf('"compilerOptions": {') + '"compilerOptions": {'.length;
+      const beforeOptions = content.substring(0, compilerOptionsStart);
+      const afterOptions = content.substring(compilerOptionsStart);
+      return beforeOptions + '\n' + pathMappingConfig + afterOptions;
+    }
+    return content;
+  };
+
+  // Update tsconfig.json (base config) - CRITICAL for IDE support
+  const tsConfigPath = path.join(config.fullPath, 'tsconfig.json');
+  let tsConfigContent = await fs.readFile(tsConfigPath, 'utf8');
+  tsConfigContent = addPathMappings(tsConfigContent);
+  await fs.writeFile(tsConfigPath, tsConfigContent);
+
+  // Update tsconfig.app.json
+  const tsConfigAppPath = path.join(config.fullPath, 'tsconfig.app.json');
+  let tsConfigAppContent = await fs.readFile(tsConfigAppPath, 'utf8');
+  tsConfigAppContent = addPathMappings(tsConfigAppContent);
+  await fs.writeFile(tsConfigAppPath, tsConfigAppContent);
+
+  // Update tsconfig.spec.json
+  const tsConfigSpecPath = path.join(config.fullPath, 'tsconfig.spec.json');
+  let tsConfigSpecContent = await fs.readFile(tsConfigSpecPath, 'utf8');
+  tsConfigSpecContent = addPathMappings(tsConfigSpecContent);
+  await fs.writeFile(tsConfigSpecPath, tsConfigSpecContent);
+}
+
+/**
+ * Configure angular.json for ESLint
+ */
+async function configureAngularJson(config) {
+  const angularJsonPath = path.join(config.fullPath, 'angular.json');
+  const angularJson = JSON.parse(await fs.readFile(angularJsonPath, 'utf8'));
+
+  // Add lint architect target
+  if (angularJson.projects && angularJson.projects[config.projectName]) {
+    angularJson.projects[config.projectName].architect.lint = {
+      builder: '@angular-eslint/builder:lint',
+      options: {
+        lintFilePatterns: ['src/**/*.ts', 'src/**/*.html'],
+      },
+    };
+  }
+
+  await fs.writeFile(angularJsonPath, JSON.stringify(angularJson, null, 2));
+}
+
+/**
+ * Install linting packages
+ */
+async function installLintingPackages(config) {
+  const execa = require('execa');
+
+  try {
+    const packages = [
+      '@eslint/js@^9.23.0',
+      'eslint@^9.23.0',
+      'angular-eslint@19.3.0',
+      'typescript-eslint@^8.20.0',
+      'prettier@^3.5.3',
+      'eslint-config-prettier@^10.1.2',
+      'prettier-plugin-tailwindcss@^0.6.11',
+      'simple-git-hooks@^2.11.1',
+    ];
+
+    await execa.command(`npm install ${packages.join(' ')} --save-dev`, {
+      cwd: config.fullPath,
+      stdio: 'pipe',
+    });
+  } catch (error) {
+    // Silently fail - packages will be installed when user runs npm install
+  }
+}
+
+/**
+ * Setup linting (ESLint, Prettier, simple-git-hooks)
+ */
+async function setupLinting(config) {
+  // Read current package.json
+  const packageJsonPath = path.join(config.fullPath, 'package.json');
+  const packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf8'));
+
+  // Add icons and PWA to regular dependencies
+  if (!packageJson.dependencies) {
+    packageJson.dependencies = {};
+  }
+  packageJson.dependencies['@ng-icons/core'] = '^29.7.0';
+  packageJson.dependencies['@ng-icons/heroicons'] = '^29.7.0';
+  packageJson.dependencies['@angular/service-worker'] = packageJson.dependencies['@angular/core'];
+
+  // Add linting dev dependencies
+  const lintingDependencies = {
+    '@eslint/js': '^9.23.0',
+    eslint: '^9.23.0',
+    'angular-eslint': '19.3.0',
+    'typescript-eslint': '^8.20.0',
+    prettier: '^3.5.3',
+    'eslint-config-prettier': '^10.1.2',
+    'prettier-plugin-tailwindcss': '^0.6.11',
+    'simple-git-hooks': '^2.11.1',
+  };
+
+  // Add enhanced scripts
+  const enhancedScripts = {
+    lint: 'ng lint',
+    'lint:fix': 'ng lint --fix',
+    format: 'prettier --write "**/*.{ts,html,css,json,md}"',
+    'format:check': 'prettier --check "**/*.{ts,html,css,json,md}"',
+    'format:ts': 'prettier --write "**/*.ts"',
+    'code:check': 'npm run format:check && npm run lint',
+    'code:fix': 'npm run format && npm run lint:fix',
+    prepare: 'simple-git-hooks',
+  };
+
+  // Add prettier configuration
+  const prettierConfig = {
+    printWidth: 100,
+    singleQuote: true,
+    trailingComma: 'es5',
+    tabWidth: 2,
+    semi: true,
+    arrowParens: 'always',
+    endOfLine: 'lf',
+    plugins: ['prettier-plugin-tailwindcss'],
+    overrides: [
+      {
+        files: '*.html',
+        options: {
+          parser: 'angular',
+        },
+      },
+    ],
+  };
+
+  // simple-git-hooks configuration (lightweight pre-commit hooks)
+  const simpleGitHooksConfig = {
+    'pre-commit': 'npm run lint',
+  };
+
+  // Update package.json
+  packageJson.devDependencies = {
+    ...packageJson.devDependencies,
+    ...lintingDependencies,
+  };
+  packageJson.scripts = { ...packageJson.scripts, ...enhancedScripts };
+  packageJson.prettier = prettierConfig;
+  packageJson['simple-git-hooks'] = simpleGitHooksConfig;
+
+  // Write updated package.json
+  await fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
+
+  // Configure angular.json for ESLint
+  await configureAngularJson(config);
+
+  // Create ESLint configuration (ESLint 9+ flat config)
+  const eslintConfig = `// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+const eslintConfigPrettier = require("eslint-config-prettier");
+
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+      eslintConfigPrettier,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+      "@angular-eslint/component-class-suffix": [
+        "error",
+        {
+          "suffixes": ["Component", "App"]
+        }
+      ],
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_"
+        }
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+);
+`;
+
+  await fs.writeFile(path.join(config.fullPath, 'eslint.config.js'), eslintConfig);
+
+  // Create .prettierignore file
+  const prettierIgnore = `# Build outputs
+dist/
+coverage/
+node_modules/
+
+# Generated files
+*.d.ts
+`;
+
+  await fs.writeFile(path.join(config.fullPath, '.prettierignore'), prettierIgnore);
+
+  // Create .prettierrc.json file for better IDE support
+  await fs.writeFile(
+    path.join(config.fullPath, '.prettierrc.json'),
+    JSON.stringify(prettierConfig, null, 2)
+  );
+
+  // Install linting packages if not skipping install
+  if (!config.skipInstall) {
+    await installLintingPackages(config);
+  }
+}
+
+/**
+ * Format code using Prettier
+ */
+async function formatCode(config) {
+  const execa = require('execa');
+
+  try {
+    // Run prettier to format all generated files (including config files)
+    await execa.command(
+      'npx prettier --write "**/*.{ts,html,css,json}" --ignore-path .gitignore --log-level silent',
+      {
+        cwd: config.fullPath,
+        stdio: 'pipe',
+      }
+    );
+  } catch (error) {
+    // If prettier fails, it's not critical - user can run it manually
+  }
+}
+
+module.exports = {
+  createVSCodeSettings,
+  updateTsConfig,
+  configureAngularJson,
+  installLintingPackages,
+  setupLinting,
+  formatCode,
+};

package/lib/templates/base/pwa.js

@@ -0,0 +1,103 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Setup PWA (Progressive Web App) configuration
+ */
+async function setupPWA(config) {
+  // Create manifest.json
+  const manifest = {
+    name: config.projectName,
+    short_name: config.projectName,
+    theme_color: '#3b82f6',
+    background_color: '#ffffff',
+    display: 'standalone',
+    scope: '/',
+    start_url: '/',
+    description: `${config.projectName} - Built with Angular and Tailwind CSS`,
+    icons: [
+      {
+        src: 'assets/icons/android-chrome-192x192.svg',
+        sizes: '192x192',
+        type: 'image/svg+xml',
+        purpose: 'maskable any',
+      },
+      {
+        src: 'assets/icons/android-chrome-512x512.svg',
+        sizes: '512x512',
+        type: 'image/svg+xml',
+        purpose: 'maskable any',
+      },
+    ],
+  };
+
+  // Write manifest to public directory (new Angular structure)
+  await fs.ensureDir(path.join(config.fullPath, 'public'));
+  await fs.writeFile(
+    path.join(config.fullPath, 'public/manifest.webmanifest'),
+    JSON.stringify(manifest, null, 2)
+  );
+
+  // Create ngsw-config.json (Service Worker configuration)
+  const ngswConfig = {
+    $schema: './node_modules/@angular/service-worker/config/schema.json',
+    index: '/index.html',
+    assetGroups: [
+      {
+        name: 'app',
+        installMode: 'prefetch',
+        resources: {
+          files: ['/favicon.ico', '/index.html', '/manifest.webmanifest', '/*.css', '/*.js'],
+        },
+      },
+      {
+        name: 'assets',
+        installMode: 'lazy',
+        updateMode: 'prefetch',
+        resources: {
+          files: [
+            '/assets/**',
+            '/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)',
+          ],
+        },
+      },
+    ],
+    dataGroups: [
+      {
+        name: 'api',
+        urls: ['https://api.example.com/**'],
+        cacheConfig: {
+          maxSize: 100,
+          maxAge: '1h',
+          timeout: '10s',
+          strategy: 'freshness',
+        },
+      },
+    ],
+  };
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'ngsw-config.json'),
+    JSON.stringify(ngswConfig, null, 2)
+  );
+
+  // Update index.html to include PWA assets
+  const indexPath = path.join(config.fullPath, 'src/index.html');
+  let indexContent = await fs.readFile(indexPath, 'utf8');
+
+  // Add manifest link and theme color meta tag if not present
+  if (!indexContent.includes('manifest.webmanifest')) {
+    indexContent = indexContent.replace(
+      '</head>',
+      `  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#3b82f6">
+  <link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.svg">
+</head>`
+    );
+    await fs.writeFile(indexPath, indexContent);
+  }
+}
+
+module.exports = {
+  setupPWA,
+};