feat(create-arca): add react-components-rollup template

Closes: #3

packages/create-arca/index.js

@@ -8,6 +8,7 @@ const {
   green,
   red,
   reset,
+  bold,
 } = require('kolorist');
 
 const cwd = process.cwd();
@@ -21,6 +22,10 @@ const templates = [
     name: 'ts-rollup-starter',
     color: green,
   },
+  {
+    name: 'react-components-rollup',
+    color: bold,
+  },
 ];
 
 const templateNames = templates.map(f => f.name);

packages/create-arca/template-react-components-rollup/.gitignore

@@ -0,0 +1,120 @@
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+es
+lib

packages/create-arca/template-react-components-rollup/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "template-react-components-rollup",
+  "version": "0.0.0",
+  "description": "",
+  "main": "dist/lib/index.js",
+  "module": "dist/es/index.js",
+  "types": "dist/types/index.d.ts",
+  "scripts": {
+    "clean": "rimraf dist es lib",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npm run clean && rollup -c rollup.config.ts"
+  },
+  "files": [
+    "dist",
+    "es",
+    "lib"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.51.1",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^4.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^3.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.30.0",
+    "sass": "^1.50.0",
+    "typescript": "^4.3.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "antd": "^4.19.5"
+  }
+}

packages/create-arca/template-react-components-rollup/rollup.config.ts

@@ -0,0 +1,90 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from 'rollup-plugin-typescript2';
+import { terser } from 'rollup-plugin-terser';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import scss from 'rollup-plugin-scss';
+import * as fs from 'fs';
+
+const components = fs.readdirSync('src').filter(name => name !== 'index.ts');
+
+const packageJson = require('./package.json');
+
+const libraryName = packageJson.name;
+
+/**
+ * plugins
+ */
+const plugins = [
+  peerDepsExternal(),
+  nodeResolve(),
+  commonjs(),
+  typescript({
+    tsconfig: './tsconfig.json',
+    useTsconfigDeclarationDir: true
+  }),
+  terser()
+];
+
+/**
+ * build es module
+ */
+const esmConfig = components.map(cmp => {
+  return {
+    input: `src/${cmp}/index.tsx`,
+    output: {
+      file: `es/${cmp}/index.js`,
+      format: 'esm',
+      sourcemap: false,
+      exports: 'named',
+    },
+    plugins: plugins.concat([
+      scss({
+        output: `es/${cmp}/index.css`,
+      })
+    ])
+  };
+});
+
+/**
+ * build cjs module
+ */
+const cjsConfig = components.map(cmp => {
+  return {
+    input: `src/${cmp}/index.tsx`,
+    output: {
+      file: `lib/${cmp}/index.js`,
+      format: 'cjs',
+      sourcemap: false,
+      exports: 'named',
+    },
+    plugins: plugins.concat([
+      scss({
+        output: `lib/${cmp}/index.css`,
+      })
+    ])
+  };
+});
+
+const config = [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: 'dist/index.js',
+        format: 'umd',
+        sourcemap: false,
+        name: libraryName,
+      }
+    ],
+    plugins: plugins.concat([
+      scss({
+        output: 'dist/index.css',
+      })
+    ])
+  },
+  ...esmConfig,
+  ...cjsConfig
+];
+
+export default config;

packages/create-arca/template-react-components-rollup/src/button/index.scss

@@ -0,0 +1,3 @@
+.button {
+  color: red;
+}

packages/create-arca/template-react-components-rollup/src/button/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import './index.scss';
+
+export interface ButtonProps {
+
+}
+
+export const Button: React.FC<ButtonProps> = (props) => (
+  <div className="button">
+    button
+  </div>
+);

packages/create-arca/template-react-components-rollup/src/index.ts

@@ -0,0 +1 @@
+export * from './button';

packages/create-arca/template-react-components-rollup/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "module": "ESNext",
+    "jsx": "react",
+    "sourceMap": true,
+    "outDir": "dist",
+    "strict": true,
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationDir": "dist/types"
+  },
+  "include": [
+    "src"
+  ]
+}