Web Components Litのプロジェクト構成 Material Design 3とmaterial-web フロントエンド定例 2023/2/10

pnpm -w storybook
pnpm -w lint

node --require esbuild-register project_generator.ts project=HogeFuga

import fs from ‘fs’;
import fse from ‘fs-extra’;
import path from ‘path’;

export const main = () => {
  const colors = {
    red: ‘\u001b[31m’,
    green: ‘\u001b[32m’,
  };

  const projectKeyValue = process.argv.join().match(/project=\S*/);
  if (!(projectKeyValue && projectKeyValue.length)) {
    console.error(`${colors.red}
not found projectKeyValue
LitによるCustum Tag実装の都合上xxxx-yyyy-zzzzというケバブケースにした名称にしたいのでパスカルケースな名称を入力してください

example)
pnpm generate project=XxxxYyyyZzzz
`);
    return 1;
  }

  const projectName = projectKeyValue[0].replace(‘project=‘, ‘’);

  if (!projectName) {
    console.error(`${colors.red}
not found projectName
LitによるCustum Tag実装の都合上xxxx-yyyy-zzzzというケバブケースにした名称にしたいのでパスカルケースな名称を入力してください

example)
pnpm generate project=XxxxYyyyZzzz
`);
    return 1;
  }

  const toKebabCase = (str) => {
    if (typeof str !== ‘string’) return str;

    str = str.replace(/^ *?[A-Z]/, function (allStr) {
      return allStr.toLowerCase();
    });
    str = str.replace(/_/g, ‘-’);
    str = str.replace(/ *?[A-Z]/g, function (allStr, i) {
      return ‘-’ + allStr.replace(/ /g, ‘’).toLowerCase();
    });
    return str;
  };

  const customTagName = toKebabCase(projectName);

  const newProjectFullPath = path.resolve(
    __dirname,
    `./packages/${projectName}`
  );
  const xxxxYyyyProjectFullPath = path.resolve(
    __dirname,
    `./packages/XxxxYyyy`
  );

  fs.rmSync(newProjectFullPath, { recursive: true, force: true });
  fse.copySync(xxxxYyyyProjectFullPath, newProjectFullPath);

  console.info(`${colors.green}
  copy ${newProjectFullPath}
`);

const packageJSONPath = path.resolve(newProjectFullPath, ‘./package.json’);
const viteConfigPath = path.resolve(newProjectFullPath, ‘./vite.config.ts’);
const srcIndexPath = path.resolve(newProjectFullPath, ‘./src/index.ts’);
const srcXxxxYyyyPath = path.resolve(
  newProjectFullPath,
  ‘./src/xxxx-yyyy.ts’
);
const srcStoriesPath = path.resolve(
  newProjectFullPath,
  ‘./src/stories/default.stories.ts’
);

fs.writeFileSync(
  packageJSONPath,
  fs
  .readFileSync(packageJSONPath)
  .toString()
  .replace(/XxxxYyyy/g, projectName)
);

fs.writeFileSync(
  viteConfigPath,
  fs
  .readFileSync(viteConfigPath)
  .toString()
  .replace(/XxxxYyyy/g, projectName)
);

fs.writeFileSync(
  srcIndexPath,
  fs
  .readFileSync(srcIndexPath)
  .toString()
  .replace(/xxxx-yyyy/g, customTagName)
);

fs.writeFileSync(
  `${newProjectFullPath}/src/${customTagName}.ts`,
  fs
  .readFileSync(srcXxxxYyyyPath)
  .toString()
  .replace(/xxxx-yyyy/g, customTagName)
  .replace(/XxxxYyyy/g, projectName)
);
fs.rmSync(srcXxxxYyyyPath);

fs.writeFileSync(
  srcStoriesPath,
  fs
  .readFileSync(srcStoriesPath)
  .toString()
  .replace(/xxxx-yyyy/g, customTagName)
  .replace(/XxxxYyyy/g, projectName)
);

console.info(`${colors.green}
Success.
`);

return 0;
};

if (process.execArgv.includes(‘esbuild-register’)) {
  try {
    const status = main();
    process.exit(status);
  } catch (e) {
    console.error(e);
    process.exit(1);
  }
}

<script src="https://~~~~~~/dist/umd.js"></script>

<l-hoge></l-hoge>