feat(plugin-js-vite-react-tailwind): creation of the package

packages/plugin-js-vite-react-tailwind/.gitignore

@@ -0,0 +1 @@
+!public/

packages/plugin-js-vite-react-tailwind/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 GenJS Dev Team <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/plugin-js-vite-react-tailwind/README.md

@@ -0,0 +1 @@
+# genjs-plugin-js-vite-react-tailwind

packages/plugin-js-vite-react-tailwind/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@genjs/genjs-plugin-js-vite-react-tailwind",
+  "version": "0.0.0",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib",
+    "templates",
+    "vars.json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "../../node_modules/.bin/jest -c ../../jest.config.js --rootDir=`pwd`",
+    "gen": "../genjs/bin/genjs",
+    "dump": "../genjs/bin/genjs dump"
+  },
+  "peerDependencies": {
+    "@genjs/genjs": "^0"
+  },
+  "dependencies": {
+    "@genjs/genjs-bundle-aws": "^0.1.28",
+    "@genjs/genjs-bundle-javascript": "^0.1.31"
+  },
+  "devDependencies": {
+    "@genjs/genjs": "^0.4.25"
+  }
+}

packages/plugin-js-vite-react-tailwind/src/Package.ts

@@ -0,0 +1,138 @@
+import {JavascriptPackage} from '@genjs/genjs-bundle-javascript';
+
+export default class Package extends JavascriptPackage {
+    constructor(config: any) {
+        super(config, __dirname);
+    }
+    // noinspection JSUnusedLocalSymbols,JSUnusedGlobalSymbols
+    protected buildDefaultVars(vars: any) {
+        return {
+            ...super.buildDefaultVars(vars),
+            project_prefix: 'mycompany',
+            project_name: 'myproject',
+        };
+    }
+    protected buildVars(vars: any): any {
+        const staticVars = require('../vars.json');
+        vars = {...staticVars, ...super.buildVars(vars)};
+        vars.scripts = {
+            ...staticVars.scripts,
+            ...(vars.scripts || {}),
+        };
+        vars.dependencies = {
+            ...staticVars.dependencies,
+            ...(vars.dependencies || {}),
+        };
+        vars.devDependencies = {
+            ...staticVars.devDependencies,
+            ...(vars.devDependencies || {}),
+        };
+        return vars;
+    }
+    protected buildReadme(vars: any) {
+        return super.buildReadme(vars)
+            .addFragmentFromTemplate(`${__dirname}/../templates/readme/original.md.ejs`)
+            ;
+    }
+    // noinspection JSUnusedLocalSymbols,JSUnusedGlobalSymbols
+    protected async buildStaticFiles(vars: any, cfg: any) {
+        return {
+            ...(await super.buildStaticFiles(vars, cfg)),
+            'public/favicon.svg?': true,
+        };
+    }
+    // noinspection JSUnusedLocalSymbols,JSUnusedGlobalSymbols
+    protected async buildDynamicFiles(vars: any, cfg: any) {
+        return {
+            ...(await super.buildDynamicFiles({licenseFile: 'LICENSE.md', ...vars}, cfg)),
+            ['package.json?']: () => JSON.stringify({
+                name: vars.name,
+                type: 'module',
+                version: vars.version,
+                license: vars.license,
+                scripts: vars.scripts,
+                devDependencies: vars.devDependencies,
+                dependencies: vars.dependencies,
+                description: vars.description,
+                author: (vars.author && ('object' === typeof vars.author)) ? vars.author : {name: vars.author_name, email: vars.author_email},
+                private: true,
+                ...(vars.raw_package_json ? vars.raw_package_json : {}),
+            }, null, 4),
+        };
+    }
+    protected async buildFilesFromTemplates(vars: any, cfg: any) {
+        return {
+            ...(await super.buildFilesFromTemplates(vars, cfg)),
+            'tsconfig.json?': true,
+            'tsconfig.node.json?': true,
+            'vite.config.ts?': true,
+            'tailwind.config.cjs?': true,
+            'postcss.config.js?': true,
+            'index.html?': true,
+            'eslintrc.cjs?': true,
+            'public/manifest.json?': true,
+            'public/robots.txt?': true,
+            'src/App.css?': true,
+            'src/App.tsx?': true,
+            'src/index.css?': true,
+            'src/main.tsx?': true,
+            'src/vite-env.d.ts?': true,
+            ...Object.entries(vars.project_envs || {}).reduce((acc, [k, v]) => {
+                acc[`env/${k}.env?`] = ['env/env.env.ejs', {project_env: v}];
+                return acc;
+            }, {}),
+        };
+    }
+    protected buildGitIgnore(vars: any) {
+        return super.buildGitIgnore(vars)
+            .addGroup('build output', [
+                '/dist/',
+                '/dist-ssr/',
+            ])
+            .addGroup('dependencies', [
+                '/node_modules/',
+            ])
+            .addGroup('testing', [
+                '/coverage',
+            ])
+            .addGroup('misc', [
+                '.DS_Store', '/.idea/', '/.vscode/',
+                '.env.local', '.env.development.local', '.env.test.local', '.env.production.local',
+                'npm-debug.log*', 'yarn-debug.log*', 'yarn-error.log*', 'pnpm-debug.log*', '/src/index.generated.css'
+            ])
+        ;
+    }
+    protected buildMakefile(vars: any) {
+        return super.buildMakefile(vars)
+            .addGlobalVar('prefix', vars.project_prefix)
+            .addGlobalVar('bucket_prefix', vars.bucket_prefix ? vars.bucket_prefix : `$(prefix)-${vars.project_name}`)
+            .addGlobalVar('env', 'dev')
+            .addGlobalVar('AWS_PROFILE', `${vars.aws_profile_prefix || '$(prefix)'}-$(env)`)
+            .addGlobalVar('bucket', vars.bucket ? vars.bucket : `$(env)-$(bucket_prefix)-${vars.name}`)
+            .addGlobalVar('cloudfront', vars.cloudfront ? vars.cloudfront : `$(AWS_CLOUDFRONT_DISTRIBUTION_ID_${vars.name.toUpperCase().replace(/[^A-Z0-9_]+/g, '_')})`)
+            .addPredefinedTarget('install', 'js-install')
+            .addPredefinedTarget('build', 'js-build', {force_npm_run: true, ci: (!!vars.hide_ci) ? 'hidden' : undefined, sourceLocalEnvLocal: vars.sourceLocalEnvLocal})
+            .addPredefinedTarget('deploy-code', 'aws-s3-sync', {source: 'dist/', cacheControl: vars.s3_cache_control})
+            .addPredefinedTarget('invalidate-cache', 'aws-cloudfront-create-invalidation')
+            .addMetaTarget('deploy', ['deploy-code', 'invalidate-cache'])
+            .addPredefinedTarget('generate-env-local', 'generate-env-local', {prefix: 'PUBLIC', mode: vars.env_mode || 'terraform'})
+            .addPredefinedTarget('start', 'js-start', {port: this.getParameter('startPort'), sourceLocalEnvLocal: vars.sourceLocalEnvLocal})
+            .addPredefinedTarget('test', 'js-test', {force_npm_run: true, ci: true, coverage: false})
+            .addPredefinedTarget('test-dev', 'js-test', {force_npm_run: true, local: true, all: true, coverage: false, color: true})
+            .addPredefinedTarget('test-cov', 'js-test', {force_npm_run: true, local: true})
+            .addPredefinedTarget('test-ci', 'js-test', {force_npm_run: true, ci: true, coverage: false})
+        ;
+    }
+    protected getTechnologies() {
+        return [
+            ...super.getTechnologies(),
+            // 'vite',
+            'tailwindcss',
+            'aws_cli',
+            'aws_cloudfront',
+            'aws_s3',
+            'aws_route53',
+            this.vars.publish_image && 'docker',
+        ];
+    }
+}

packages/plugin-js-vite-react-tailwind/src/Plugin.ts

@@ -0,0 +1,12 @@
+import Package from './Package';
+import {IGenerator, IPlugin} from '@genjs/genjs';
+import registerJavascriptBundle from '@genjs/genjs-bundle-javascript';
+import registerAwsBundle from '@genjs/genjs-bundle-aws';
+
+export default class Plugin implements IPlugin {
+    register(generator: IGenerator): void {
+        registerAwsBundle(generator);
+        registerJavascriptBundle(generator);
+        generator.registerPackager('js-vite-react-tailwind', cfg => new Package(cfg));
+    }
+}

packages/plugin-js-vite-react-tailwind/src/index.ts

@@ -0,0 +1 @@
+export {default as default} from './Plugin';

packages/plugin-js-vite-react-tailwind/templates/.eslintrc.cjs.ejs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

packages/plugin-js-vite-react-tailwind/templates/env/env.env.ejs

@@ -0,0 +1 @@
+AWS_CLOUDFRONT_DISTRIBUTION_ID_<%= (name || 'app').toUpperCase() -%>=<%= project_env[`${name}Cloudfront`] ||'EXXXXXXXXXXXXX' %>

packages/plugin-js-vite-react-tailwind/templates/index.html.ejs

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" class="h-full bg-white">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="https://statics.gotombola.co/tenants/gotombola/images/favicons/gotombola/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>APP</title>
+  </head>
+  <body class="h-full bg-gray-50">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

packages/plugin-js-vite-react-tailwind/templates/postcss.config.js.ejs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/plugin-js-vite-react-tailwind/templates/public/manifest.json.ejs

@@ -0,0 +1,15 @@
+{
+  "short_name": "App",
+  "name": "App",
+  "icons": [
+    {
+      "src": "favicon.svg",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/svg+xml"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

packages/plugin-js-vite-react-tailwind/templates/public/robots.txt.ejs

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

packages/plugin-js-vite-react-tailwind/templates/readme/original.md.ejs

@@ -0,0 +1 @@
+# <%= name %>

packages/plugin-js-vite-react-tailwind/templates/src/App.tsx.ejs

@@ -0,0 +1,19 @@
+import './App.css'
+import {
+    createBrowserRouter,
+    RouterProvider,
+} from "react-router-dom";
+
+function App() {
+    const router = createBrowserRouter([
+        {
+            path: '/',
+            element: () => <div>HOME</div>,
+        },
+    ]);
+  return (
+    <RouterProvider router={router} />
+  )
+}
+
+export default App

packages/plugin-js-vite-react-tailwind/templates/src/index.css.ejs

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/plugin-js-vite-react-tailwind/templates/src/main.tsx.ejs

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

packages/plugin-js-vite-react-tailwind/templates/src/vite-env.d.ts.ejs

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/plugin-js-vite-react-tailwind/templates/tailwind.config.js.ejs

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}

packages/plugin-js-vite-react-tailwind/templates/tsconfig.json.ejs

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

packages/plugin-js-vite-react-tailwind/templates/tsconfig.node.json.ejs

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

packages/plugin-js-vite-react-tailwind/templates/vite.config.ts.ejs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

packages/plugin-js-vite-react-tailwind/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./lib",
+    "composite": true
+  },
+  "references": [
+    { "path": "../genjs" },
+    { "path": "../bundle-javascript" },
+    { "path": "../bundle-aws" }
+  ],
+  "include": [
+    "./src"
+  ]
+}