Add create-yorkie-app

examples/CONTRIBUTING.md

@@ -4,7 +4,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md) for the general guides for contributio
 
 ## Keeping create-yorkie-app in sync with examples
 
-When adding a new example, you have to update create-yorkie-app's [FRAMEWORKS.ts](../tools//create-yorkie-app/FRAMEWORKS.ts).
+When adding a new example, you have to update create-yorkie-app's [frameworks.ts](../tools//create-yorkie-app/frameworks.ts).
 
 Add FrameworkVariant to the variants array under appropriate category like:
 
@@ -18,23 +18,19 @@ export const FRAMEWORKS: Array<Framework> = [
       {
         name: 'vanilla-codemirror6',
         display: 'codemirror',
-        color: yellow,
       },
       {
         name: 'vanilla-quill',
         display: 'quill',
-        color: yellow,
       },
       {
         name: 'profile-stack',
         display: 'profile-stack',
-        color: yellow,
       },
       // Your yorkie example in Vanilla JS
       {
         name: 'directory-name',
         display: 'display-name',
-        color: yellow,
       },
     ],
   },

tools/create-yorkie-app/FRAMEWORKS.ts → tools/create-yorkie-app/frameworks.ts

@@ -1,12 +1,17 @@
 import { cyan, lightGreen, reset, yellow } from 'kolorist';
 
-type ColorFunc = (str: string | number) => string;
 export type Framework = {
   name: string;
   display: string;
   color: ColorFunc;
   variants: Array<FrameworkVariant>;
 };
+
+/**
+ * @see https://github.com/marvinhagemeister/kolorist#readme
+ */
+type ColorFunc = (str: string | number) => string;
+
 type FrameworkVariant = {
   /**
    * directory name of the example
@@ -16,11 +21,6 @@ type FrameworkVariant = {
    * display name (in prompt) of the example
    */
   display: string;
-  /**
-   * highlight color
-   * @see https://github.com/marvinhagemeister/kolorist#readme
-   */
-  color: ColorFunc;
 };
 
 export const FRAMEWORKS: Array<Framework> = [
@@ -32,17 +32,14 @@ export const FRAMEWORKS: Array<Framework> = [
       {
         name: 'vanilla-codemirror6',
         display: 'codemirror',
-        color: yellow,
       },
       {
         name: 'vanilla-quill',
         display: 'quill',
-        color: yellow,
       },
       {
         name: 'profile-stack',
         display: 'profile-stack',
-        color: yellow,
       },
     ],
   },
@@ -54,17 +51,14 @@ export const FRAMEWORKS: Array<Framework> = [
       {
         name: 'react-tldraw',
         display: 'tldraw',
-        color: cyan,
       },
       {
         name: 'react-todomvc',
         display: 'todomvc',
-        color: cyan,
       },
       {
         name: 'simultaneous-cursors',
         display: 'simultaneous-cursors',
-        color: cyan,
       },
     ],
   },
@@ -76,7 +70,6 @@ export const FRAMEWORKS: Array<Framework> = [
       {
         name: 'nextjs-scheduler',
         display: 'scheduler',
-        color: reset,
       },
     ],
   },
@@ -88,7 +81,6 @@ export const FRAMEWORKS: Array<Framework> = [
       {
         name: 'vuejs-kanban',
         display: 'kanban',
-        color: lightGreen,
       },
     ],
   },

tools/create-yorkie-app/index.ts

@@ -8,7 +8,7 @@ import { fileURLToPath } from 'node:url';
 import minimist from 'minimist';
 import prompts from 'prompts';
 import { red, reset } from 'kolorist';
-import { type Framework, FRAMEWORKS } from './FRAMEWORKS';
+import { type Framework, FRAMEWORKS } from './frameworks';
 
 // Avoids autoconversion to number of the project name by defining that the args
 // non associated with an option ( _ ) needs to be parsed as a string. See https://github.com/vitejs/vite/pull/4606
@@ -18,14 +18,14 @@ const argv = minimist<{
 }>(process.argv.slice(2), { string: ['_'] });
 const cwd = process.cwd();
 
-const TEMPLATES = FRAMEWORKS.map(
-  (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name],
-).reduce((a, b) => a.concat(b), []);
-
 const renameFiles: Record<string, string | undefined> = {
   _gitignore: '.gitignore',
 };
 
+const TEMPLATES = FRAMEWORKS.map(
+  (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name],
+).reduce((a, b) => a.concat(b), []);
+
 const apiKeyMessage = 'You can update your API key in .env';
 let apiKey = '';
 
@@ -127,11 +127,10 @@ async function init() {
             framework && framework.variants ? 'select' : null,
           name: 'variant',
           message: reset('Select a variant:'),
-          choices: (framework: Framework) =>
-            framework.variants.map((variant) => {
-              const variantColor = variant.color;
+          choices: ({ variants, color }: Framework) =>
+            variants.map((variant) => {
               return {
-                title: variantColor(variant.display || variant.name),
+                title: color(variant.display || variant.name),
                 value: variant.name,
               };
             }),
@@ -144,7 +143,7 @@ async function init() {
       },
     );
   } catch (cancelled: any) {
-    console.log(cancelled.message);
+    console.error(cancelled.message);
     return;
   }
 
@@ -262,15 +261,15 @@ function copyDir(srcDir: string, destDir: string) {
 
 function isEmpty(path: string) {
   const files = fs.readdirSync(path);
-  return files.length === 0 || (files.length === 1 && files[0] === '.git');
+  return !files.length || !files.filter((file) => /^[^.]+/.test(file)).length;
 }
 
 function emptyDir(dir: string) {
   if (!fs.existsSync(dir)) {
     return;
   }
   for (const file of fs.readdirSync(dir)) {
-    if (file === '.git') {
+    if (/^\./.test(file)) {
       continue;
     }
     fs.rmSync(path.resolve(dir, file), { recursive: true, force: true });

tools/create-yorkie-app/package.json

@@ -14,7 +14,6 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@types/cross-spawn": "^6.0.2",
     "@types/minimist": "^1.2.2",
     "@types/prompts": "^2.4.4",
     "kolorist": "^1.8.0",

tools/create-yorkie-app/webpack.config.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2020 The Yorkie Authors. All rights reserved.
+ * Copyright 2023 The Yorkie Authors. All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.