Merge pull request #153 from themerdev/npm

V5
mjswensen · Feb 25, 2023 · 6616930 · 6616930
2 parents 6557589 + de7cf73
commit 6616930
Show file tree

Hide file tree

Showing 597 changed files with 95,903 additions and 46,317 deletions.
diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
@@ -1,4 +1,6 @@
-FROM node:14
+FROM node:18
+
+RUN npm install -g npm
 
 RUN apt-get update \
   && apt-get install -y \

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -5,5 +5,5 @@
   },
   "remoteUser": "node",
   "extensions": ["esbenp.prettier-vscode"],
-  "postCreateCommand": "cd cli && yarn && cd ../web && yarn"
+  "postCreateCommand": "cd cli && npm install && cd ../web && npm install --legacy-peer-deps"
 }
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -5,13 +5,7 @@ Thanks for contributing to themer! All contributions are welcome, and are expect
 - [Log a bug](#log-a-bug)
 - [Request a theme template](#request-a-theme-template)
 - [Provide a theme template implementation](#provide-a-theme-template-implementation)
-  - [Option 1: as part of the themer repository](#option-1-as-part-of-the-themer-repository)
-  - [Option 2: as a third-party npm package](#option-2-as-a-third-party-npm-package)
 - [Provide a color set](#provide-a-color-set)
-  - [Option 1: for personal use](#option-1-for-personal-use)
-    - [Option 1.1: using themer.dev](#option-11-using-themerdev)
-    - [Option 1.2: using npm](#option-12-using-npm)
-  - [Option 2: as part of the themer repository](#option-2-as-part-of-the-themer-repository)
 
 ## Log a bug
 
@@ -33,30 +27,12 @@ If you use a tool that themer doesn't support yet, feel free to request it by cr
 
 ## Provide a theme template implementation
 
-### Option 1: as part of the themer repository
-
-If there is a theme template that should be distributed as an officially supported package (under the `@themer` namespace on npm), it should be contributed directly to the themer repository rather than as a standalone package as in Option 2 below.
-
 1. Clone the themer repository.
 2. `cd cli`
-3. `yarn` to install dependencies
-4. Run `./scripts/generate-template-package.zsh <the name of the tool or program you are making a theme template for>`. This step is optional but will save you some time as it sets up the basic scaffolding for your package. (For wallpaper templates, use the `generate-wallpaper-package.zsh` script instead.)
-5. Implement your theme's `render()` function in `/cli/packages/<your package>/lib/index.js`, following the documentation in the ["Create your own template" section of the README](https://github.com/themerdev/themer#create-your-own-template).
-6. Develop and test your package with the following command within the `/cli/packages` directory: `./themer/bin/themer.js -c ./colors-default -t ./<your package directory> -o <some output directory you can inspect, like /tmp/themer>`
-7. Submit a pull request.
-8. After merging, your package will be released to npm under the `@themer` namespace and then included in the web UI at [https://themer.dev](themer.dev).
-
-### Option 2: as a third-party npm package
-
-If you would like to implement a theme template for personal use, or would like to maintain the theme independent of themer's main repository, the easiest way is to author your own npm package that exports a `render()` function as documented on the ["Create your own template" section of the README](https://github.com/themerdev/themer#create-your-own-template).
-
-To develop and test your package using the themer CLI, the following command may be used (requires Node.js to be installed):
-
-    npx -p themer -p @themerdev/colors-default themer -c @themerdev/colors-default -t <path to your local package directory> -o <path to your desired output directory>
-
-Once your package is developed, you can publish it for free on the npm registry. I would recommend prefixing the name with `themer-` so that others can easily find it.
-
-Once published, open a pull request to add your package to the [list of community-contributed theme templates](https://github.com/themerdev/themer#community) (or simply reach out through an issue on GitHub or message to [@themerdev on Twitter](https://twitter.com/themerdev)).
+3. `npm install` to install dependencies
+4. Create a new file in the `src/template/` directory.
+5. Implement the template interface, following the documentation in the ["Create custom `Template`s" section of the README](https://github.com/themerdev/themer#create-custom-templates).
+6. Submit a pull request.
 
 ## Provide a color set
 
@@ -68,27 +44,25 @@ There are a few different ways to develop your own themes and share them with ot
 
 The easiest way to create your personal theme is to configure it using the web UI at [themer.dev](https://themer.dev). After doing so, you can simply share your unique URL however you'd like. On supported browsers, there is a convenient "Copy URL" button at the bottom of the page that can be used for easy sharing, or you can simply copy the contents of your browser's address bar to share your theme.
 
-You can also download your theme and a `colors.js` file that is compatible with themer's CLI will automatically be included. You can use this file on your local machine or publish it to npm if desired.
-
-#### Option 1.2: using npm
+You can also download your theme and a `colors.js` file that is compatible with themer's CLI will automatically be included.
 
-You can also publish your personal themes to npm for others to use with themer's CLI. To do so, define your colors following the instructions under the ["Create your own color set" section of the README](https://github.com/themerdev/themer#create-your-own-color-set). To test your color configuration file, you can use the following command:
+#### Option 1.2: using the CLI or API
 
-    npx -p themer -p @themerdev/vscode themer -c <path to your colors file> -t @themerdev/vscode -o <path to your desired output directory>
+Define your colors following the instructions under the ["Create custom `ColorSet`s" section of the README](https://github.com/themerdev/themer#create-custom-colorsets). To test your color configuration file, you can use the following command:
 
-(Note that you can use any template you wish in place of `@themerdev/vscode`.)
+```sh
+npx themer -c <path to your colors file> -t vs-code -o <path to your desired output directory>
+```
 
-Once your color set package is ready, you can publish it on the npm registry. I would recommend prefixing the name with `themer-colors-` so that others can easily find it.
+(Note that you can use any template you wish in place of `vs-code`.)
 
-### Option 2: as part of the themer repository
+### Option 2: as an official built-in color set
 
-If a color set should be distributed on npm under the `@themer` namespace and included in the official web UI at [themer.dev](https://themer.dev), it should be included in themer's main repository rather than distributed separately as in option 1 above.
+If a color set should be distributed with `themer` in the official web UI at [themer.dev](https://themer.dev), it should be included in themer's main repository rather than distributed separately as in option 1 above.
 
 1. Clone the themer repository.
 2. `cd cli`
-3. `yarn` to install dependencies
-4. Run `./scripts/generate-color-package.zsh <the name of the color set>`. This step is optional but will save you some time as it sets up the basic scaffolding for your package.
-5. Implement your color set's `colors` object in `/cli/packages/<your package>/lib/index.js`, following the documentation in the ["Create your own color set" section of the README](https://github.com/themerdev/themer#create-your-own-color-set).
-6. Develop and test your package with the following command within the `/cli/packages` directory: `./themer/bin/themer.js -c ./<your package directory> -t ./vscode -t ./wallpaper-block-wave -o <some output directory you can inspect, like /tmp/themer>`
-7. Submit a pull request.
-8. After merging, your package will be released to npm under the `@themer` namespace and then included in the web UI at [https://themer.dev](themer.dev).
+3. `npm install` to install dependencies
+4. Create a new file in the `src/color-set/` directory.
+5. Implement your color set interface, following the documentation in the ["Create custom `ColorSet`s" section of the README](https://github.com/themerdev/themer#create-custom-colorsets).
+6. Submit a pull request.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -39,16 +39,15 @@ Please fill out the following information if you are using the web UI at [themer
 - Browser [e.g. Chrome, Safari]:
 - Browser version [e.g. 22]:
 
-## CLI
+## CLI or API
 
-Please fill out the following information if you are using the command-line interface. For the web UI, you can delete this section.
+Please fill out the following information if you are using the command-line interface or programmatic API. For the web UI, you can delete this section.
 
 - Device [e.g. iPhone6, MacBook Pro]:
 - OS [e.g. iOS, macOS]:
 - OS version [e.g. 14.0]:
 - Node version [e.g. 14.4.0]:
-- `themer` version [e.g. 3.3.4]:
-- Other `themer` packages and their versions [e.g. `@themerdev/[email protected]`]:
+- `themer` version [e.g. 5.0.0]:
 
 # Additional context
 

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -9,32 +9,28 @@ jobs:
   test-cli:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Install dependencies
         run: |
           cd cli
-          yarn
-      - name: Check formatting
-        run: |
-          cd cli
-          yarn test:format
+          npm install
       - name: Run tests
         run: |
           cd cli
-          yarn test:unit
+          npm run test
   test-web:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Install dependencies
         run: |
           cd web
-          yarn
+          npm install --legacy-peer-deps
       - name: Check formatting
         run: |
           cd web
-          yarn test:format
+          npm run test:format
       - name: Run tests
         run: |
           cd web
-          yarn test:unit
+          npm run test:unit
diff --git a/.vscode/cli.code-snippets b/.vscode/cli.code-snippets
@@ -0,0 +1,43 @@
+{
+  "Color Set": {
+    "scope": "typescript",
+    "prefix": "color-set",
+    "body": [
+      "import type { ColorSet } from './index.js';",
+      "",
+      "const colors: ColorSet = {",
+      "  name: '$1',",
+      "  variants: {",
+      "    $2",
+      "  },",
+      "};",
+      "",
+      "export default colors;",
+      "$0"
+    ]
+  },
+  "Template": {
+    "scope": "typescript",
+    "prefix": "template",
+    "body": [
+      "import type { Template } from './index.js';",
+      "import { colorSetToVariants } from '../color-set/index.js';",
+      "",
+      "const template: Template = {",
+      "  name: '$1',",
+      "  render: async function* (colorSet) {",
+      "    const variants = colorSetToVariants(colorSet);",
+      "    for (const variant of variants) {",
+      "      $2",
+      "    }",
+      "  },",
+      "  renderInstructions: (paths) => {",
+      "    $3",
+      "  },",
+      "};",
+      "",
+      "export default template;",
+      "$0"
+    ]
+  }
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "streetsidesoftware.code-spell-checker"
+  ],
+  "unwantedRecommendations": []
+}
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -1,110 +1,35 @@
 {
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
     {
       "type": "node",
       "request": "launch",
-      "name": "Debug current test",
-      "cwd": "${workspaceFolder}/cli",
-      "program": "node_modules/.bin/jest",
-      "args": ["--runInBand", "${relativeFile}"]
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Run",
-      "skipFiles": ["<node_internals>/**"],
-      "cwd": "${workspaceFolder}/cli/packages",
-      "program": "./themer/lib/index.js",
+      "name": "Run CLI",
+      "cwd": "${workspaceFolder}/cli/",
+      "program": "./dist/bin.js",
       "args": [
-        "-c",
-        "./${input:colorSet}",
-        "-t",
-        "./${input:template}",
-        "-o",
-        "${workspaceFolder}/cli/tmp"
-      ]
+        "--color-set",
+        "${input:colorSet}",
+        "--template",
+        "${input:template}",
+        "--output",
+        "tmp"
+      ],
+      "preLaunchTask": "build cli"
     }
   ],
   "inputs": [
     {
       "id": "colorSet",
-      "type": "pickString",
-      "description": "Color set package",
-      "options": [
-        "colors-default",
-        "colors-dracula",
-        "colors-finger-paint",
-        "colors-github-universe",
-        "colors-green-as-a-whistle",
-        "colors-lucid",
-        "colors-mojave",
-        "colors-monkey",
-        "colors-night-sky",
-        "colors-nova",
-        "colors-one",
-        "colors-polar-ice",
-        "colors-right-in-the-teals",
-        "colors-rivet",
-        "colors-seti",
-        "colors-solarized"
-      ],
-      "default": "colors-default"
+      "description": "Color set to render",
+      "type": "promptString",
+      "default": "*"
     },
     {
       "id": "template",
-      "type": "pickString",
-      "description": "Template package",
-      "options": [
-        "alacritty",
-        "alfred",
-        "atom-syntax",
-        "atom-ui",
-        "bbedit",
-        "brave",
-        "chrome",
-        "cmd",
-        "conemu",
-        "css",
-        "emacs",
-        "firefox-addon",
-        "firefox-color",
-        "hyper",
-        "iterm",
-        "kde-plasma-colors",
-        "kitty",
-        "konsole",
-        "preview-code",
-        "preview-inline",
-        "preview-swatch",
-        "prism",
-        "sketch-palettes",
-        "slack",
-        "sublime-text",
-        "terminal",
-        "terminator",
-        "vim",
-        "vim-lightline",
-        "visual-studio",
-        "vscode",
-        "wallpaper-block-wave",
-        "wallpaper-burst",
-        "wallpaper-circuits",
-        "wallpaper-diamonds",
-        "wallpaper-dot-grid",
-        "wallpaper-octagon",
-        "wallpaper-shirts",
-        "wallpaper-triangles",
-        "wallpaper-trianglify",
-        "warp",
-        "windows-terminal",
-        "wox",
-        "xcode",
-        "xresources"
-      ]
+      "description": "Template to render",
+      "type": "promptString",
+      "default": "*"
     }
   ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,22 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "cSpell.words": [
+    "alacritty",
+    "bbedit",
+    "chriskempson",
+    "conemu",
+    "dotfiles",
+    "iterm",
+    "Jamstacker",
+    "keypirinha",
+    "konsole",
+    "lightline",
+    "seti",
+    "themer",
+    "themerdev",
+    "trevordmiller",
+    "trianglify",
+    "xresources"
+  ]
 }