@spicemod/creator 0.0.1

package/dist/templates/extension/ts/react/eslint.config.ts

@@ -0,0 +1,29 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import react from "eslint-plugin-react";
+import css from "@eslint/css";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  {
+    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    plugins: { js, react },
+    extends: ["js/recommended"],
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: globals.browser,
+    },
+  },
+  tseslint.configs.recommended,
+  {
+    files: ["**/*.css"],
+    plugins: { css },
+    language: "css/css",
+    extends: ["css/recommended"],
+  },
+]);

package/dist/templates/extension/ts/react/src/app.tsx

@@ -0,0 +1,27 @@
+import "@/app.css";
+import { createRoot } from "react-dom/client";
+// you can use aliases too ! (just add them to tsconfig.json)
+import Onboarding from "@/components/Onboarding";
+
+const config = {
+  projectName: "{{project-name}}",
+  framework: "{{framework}}",
+  language: "{{language}}",
+  packageManager: "{{package-manager}}",
+  linter: "{{linter}}",
+};
+
+function main() {
+  // Create a container for the React application
+  // We append this to document.body to ensure it sits above the Spotify UI
+  const container = document.createElement("div");
+  container.id = "spicetify-onboarding-root";
+  document.body.appendChild(container);
+
+  const root = createRoot(container);
+
+  // Render the Onboarding UI
+  root.render(<Onboarding config={config} />);
+}
+
+main();

package/dist/templates/extension/ts/react/src/components/Onboarding.tsx

@@ -0,0 +1,83 @@
+import { useState } from "react";
+
+interface OnboardingProps {
+  config: {
+    projectName: string;
+    framework: string;
+    language: string;
+    packageManager: string;
+    linter: string;
+  };
+}
+
+const Onboarding: React.FC<OnboardingProps> = ({ config }) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const [isFading, setIsFading] = useState(false);
+
+  const handleDismiss = () => {
+    setIsFading(true);
+    setTimeout(() => setIsVisible(false), 250);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className={`onboarding-overlay ${isFading ? "fade-out" : ""}`} onClick={handleDismiss}>
+      <div className="onboarding-card" onClick={(e) => e.stopPropagation()}>
+        <button className="close-icon-btn" onClick={handleDismiss} aria-label="Close">
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+            <path
+              d="M1 1L11 11M1 11L11 1"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+
+        <div className="status-badge">🚀 {config.projectName} Ready</div>
+
+        <div className="config-grid">
+          <span className="label">Framework</span>
+          <span className="value">{config.framework}</span>
+
+          <span className="label">Language</span>
+          <span className="value">{config.language}</span>
+
+          <span className="label">Manager</span>
+          <span className="value">{config.packageManager}</span>
+
+          <span className="label">Linter</span>
+          <span className="value">{config.linter}</span>
+        </div>
+
+        <div className="footer-tip">
+          Next Step: Edit <code>src/app.tsx</code>
+        </div>
+
+        <div className="onboarding-actions">
+          <button className="get-started-btn" onClick={() => openLink("{{get-started-link}}")}>
+            Get Started
+          </button>
+          <button className="discord-btn" onClick={() => openLink("{{discord-link}}")}>
+            Join Discord
+          </button>
+          <button className="dismiss-btn" onClick={handleDismiss}>
+            Dismiss
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Onboarding;
+
+function openLink(url: string, newTab = true) {
+  if (!url) return;
+  if (newTab) {
+    window.open(url, "_blank", "noopener,noreferrer");
+  } else {
+    window.location.href = url;
+  }
+}

package/dist/templates/extension/ts/vanilla/biome.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.13/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": true,
+    "includes": ["**", "!node_modules", "!dist"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noUnknownAtRules": "off"
+      }
+    },
+    "domains": {
+      "project": "recommended"
+    }
+  },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

package/dist/templates/extension/ts/vanilla/eslint.config.ts

@@ -0,0 +1,16 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import css from "@eslint/css";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  {
+    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    plugins: { js },
+    extends: ["js/recommended"],
+    languageOptions: { globals: globals.browser },
+  },
+  tseslint.configs.recommended,
+  { files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] },
+]);

package/dist/templates/extension/ts/vanilla/src/app.ts

@@ -0,0 +1,12 @@
+import "@/app.css";
+import { initOnboarding } from "@/components/Onboarding";
+
+const config = {
+  projectName: "{{project-name}}",
+  framework: "{{framework}}",
+  language: "{{language}}",
+  packageManager: "{{package-manager}}",
+  linter: "{{linter}}",
+};
+
+initOnboarding(config);

package/dist/templates/extension/ts/vanilla/src/components/Onboarding.ts

@@ -0,0 +1,79 @@
+interface OnboardingConfig {
+  projectName: string;
+  framework: string;
+  language: string;
+  packageManager: string;
+  linter: string;
+}
+
+export function initOnboarding(config: OnboardingConfig): void {
+  const overlay = document.createElement("div");
+  overlay.className = "onboarding-overlay";
+
+  overlay.innerHTML = `
+    <div class="onboarding-card">
+      <button class="close-icon-btn" aria-label="Close" id="close-x">
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+          <path d="M1 1L11 11M1 11L11 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+      </button>
+
+      <div>
+        <span class="status-dot"></span>
+        🚀 ${config.projectName} Ready
+      </div>
+
+      <div class="config-grid">
+        <span class="label">Framework</span>
+        <span class="value">${config.framework}</span>
+
+        <span class="label">Language</span>
+        <span class="value">${config.language}</span>
+
+        <span class="label">Manager</span>
+        <span class="value">${config.packageManager}</span>
+
+        <span class="label">Linter</span>
+        <span class="value">${config.linter}</span>
+      </div>
+
+      <div class="footer-tip">
+        Next Step: Edit <code>src/app.tsx</code>
+      </div>
+      <div class="onboarding-actions">
+      <button class="dismiss-btn" id="dismiss-btn">Dismiss</button>
+      <button class="discord-btn" id="discord-btn">Join Discord</button>
+      <button class="get-started-btn" id="get-started-btn">Get Started</button>
+      </div>
+    </div>
+  `;
+
+  const dismiss = (): void => {
+    overlay.classList.add("fade-out");
+    overlay.addEventListener("transitionend", () => overlay.remove(), {
+      once: true,
+    });
+  };
+
+  overlay.addEventListener("click", (e: MouseEvent) => {
+    if (e.target === overlay) dismiss();
+  });
+
+  function openLink(url: string, newTab = true) {
+    if (!url) return;
+    if (newTab) {
+      window.open(url, "_blank", "noopener,noreferrer");
+    } else {
+      window.location.href = url;
+    }
+  }
+
+  const getStarted = () => openLink("{{get-started-link}}");
+  const openDiscord = () => openLink("{{discord-link}}");
+  overlay.querySelector("#close-x")?.addEventListener("click", dismiss);
+  overlay.querySelector("#dismiss-btn")?.addEventListener("click", dismiss);
+  overlay.querySelector("#discord-btn")?.addEventListener("click", openDiscord);
+  overlay.querySelector("#get-started-btn")?.addEventListener("click", getStarted);
+
+  document.body.prepend(overlay);
+}

package/dist/templates/liveReload.js

@@ -0,0 +1,70 @@
+(() => {
+  const WS_URL = _HOT_RELOAD_LINK;
+  const SERVER = _SERVER_URL;
+  const CSS_PATH = _CSS_PATH;
+  const JS_PATH = _JS_PATH;
+
+  const CSS_ID = "sc-css-injected";
+  const JS_ID = "sc-js-injected";
+
+  let socket;
+
+  const connect = () => {
+    socket = new WebSocket(WS_URL);
+
+    socket.addEventListener("open", () => {
+      console.log("[SC] Live reload connected");
+    });
+
+    socket.addEventListener("message", (event) => {
+      let updated;
+
+      try {
+        updated = JSON.parse(event.data);
+      } catch {
+        return;
+      }
+
+      if (!Array.isArray(updated) || updated.length === 0) return;
+
+      const isOnlyCSS = updated.every((file) => file.endsWith(".css"));
+
+      if (isOnlyCSS && CSS_PATH) {
+        const link = document.getElementById(CSS_ID);
+        if (!link || !link.parentNode) return;
+
+        const next = link.cloneNode(false);
+        next.href = `${SERVER}${CSS_PATH}?t=${Date.now()}`;
+        next.onload = () => link.remove();
+
+        link.parentNode.insertBefore(next, link.nextSibling);
+      } else {
+        window.location.reload();
+      }
+    });
+
+    socket.addEventListener("close", () => {
+      setTimeout(connect, 1000);
+    });
+
+    socket.addEventListener("error", () => {
+      socket.close();
+    });
+  };
+
+  if (CSS_PATH) {
+    const link = document.createElement("link");
+    link.id = CSS_ID;
+    link.rel = "stylesheet";
+    link.href = SERVER + CSS_PATH;
+    document.head.appendChild(link);
+  }
+
+  const script = document.createElement("script");
+  script.id = JS_ID;
+  script.src = SERVER + JS_PATH;
+  script.type = "module";
+  document.body.appendChild(script);
+
+  connect();
+})();

package/dist/templates/theme/js/react/eslint.config.js

@@ -0,0 +1,29 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import react from "eslint-plugin-react";
+import css from "@eslint/css";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  {
+    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    plugins: { js, react },
+    extends: ["js/recommended"],
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: globals.browser,
+    },
+  },
+  tseslint.configs.recommended,
+  {
+    files: ["**/*.css"],
+    plugins: { css },
+    language: "css/css",
+    extends: ["css/recommended"],
+  },
+]);

package/dist/templates/theme/js/react/src/app.jsx

@@ -0,0 +1,25 @@
+import { createRoot } from "react-dom/client";
+// you can use aliases too ! (just add them to tsconfig.json)
+import OnboardingCard from "@/components/Onboarding";
+
+const config = {
+  projectName: "{{project-name}}",
+  framework: "{{framework}}",
+  language: "{{language}}",
+  packageManager: "{{package-manager}}",
+  linter: "{{linter}}",
+};
+
+function main() {
+  // Create a container for the React application
+  // We append this to document.body to ensure it sits above the Spotify UI
+  const container = document.createElement("div");
+  container.id = "spicetify-onboarding-root";
+  document.body.appendChild(container);
+
+  const root = createRoot(container);
+
+  // Render the Onboarding UI
+  root.render(<OnboardingCard config={config} />);
+}
+main();

package/dist/templates/theme/js/react/src/components/Onboarding.jsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+const Onboarding = ({ config }) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const [isFading, setIsFading] = useState(false);
+
+  const handleDismiss = () => {
+    setIsFading(true);
+    setTimeout(() => setIsVisible(false), 250);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className={`onboarding-overlay ${isFading ? "fade-out" : ""}`} onClick={handleDismiss}>
+      <div className="onboarding-card" onClick={(e) => e.stopPropagation()}>
+        <button className="close-icon-btn" onClick={handleDismiss} aria-label="Close">
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+            <path
+              d="M1 1L11 11M1 11L11 1"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+
+        <div className="status-badge">🚀 {config.projectName} Ready</div>
+
+        <div className="config-grid">
+          <span className="label">Framework</span>
+          <span className="value">{config.framework}</span>
+
+          <span className="label">Language</span>
+          <span className="value">{config.language}</span>
+
+          <span className="label">Manager</span>
+          <span className="value">{config.packageManager}</span>
+
+          <span className="label">Linter</span>
+          <span className="value">{config.linter}</span>
+        </div>
+
+        <div className="footer-tip">
+          Next Step: Edit <code>src/app.tsx</code>
+        </div>
+
+        <div className="onboarding-actions">
+          <button className="get-started-btn" onClick={() => openLink("{{get-started-link}}")}>
+            Get Started
+          </button>
+          <button className="discord-btn" onClick={() => openLink("{{discord-link}}")}>
+            Join Discord
+          </button>
+          <button className="dismiss-btn" onClick={handleDismiss}>
+            Dismiss
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Onboarding;
+
+function openLink(url, newTab = true) {
+  if (!url) return;
+  if (newTab) {
+    window.open(url, "_blank", "noopener,noreferrer");
+  } else {
+    window.location.href = url;
+  }
+}

package/dist/templates/theme/js/vanilla/eslint.config.js

@@ -0,0 +1,16 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import css from "@eslint/css";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  {
+    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    plugins: { js },
+    extends: ["js/recommended"],
+    languageOptions: { globals: globals.browser },
+  },
+  tseslint.configs.recommended,
+  { files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] },
+]);

package/dist/templates/theme/js/vanilla/src/app.js

@@ -0,0 +1,11 @@
+import { initOnboarding } from "@/components/Onboarding";
+
+const config = {
+  projectName: "{{project-name}}",
+  framework: "{{framework}}",
+  language: "{{language}}",
+  packageManager: "{{package-manager}}",
+  linter: "{{linter}}",
+};
+
+initOnboarding(config);

package/dist/templates/theme/js/vanilla/src/components/Onboarding.js

@@ -0,0 +1,71 @@
+export function initOnboarding(config) {
+  const overlay = document.createElement("div");
+  overlay.className = "onboarding-overlay";
+
+  overlay.innerHTML = `
+    <div class="onboarding-card">
+      <button class="close-icon-btn" aria-label="Close" id="close-x">
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+          <path d="M1 1L11 11M1 11L11 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+      </button>
+
+      <div>
+        <span class="status-dot"></span>
+        🚀 ${config.projectName} Ready
+      </div>
+
+      <div class="config-grid">
+        <span class="label">Framework</span>
+        <span class="value">${config.framework}</span>
+
+        <span class="label">Language</span>
+        <span class="value">${config.language}</span>
+
+        <span class="label">Manager</span>
+        <span class="value">${config.packageManager}</span>
+
+        <span class="label">Linter</span>
+        <span class="value">${config.linter}</span>
+      </div>
+
+      <div class="footer-tip">
+        Next Step: Edit <code>src/app.tsx</code>
+      </div>
+      <div class="onboarding-actions">
+      <button class="dismiss-btn" id="dismiss-btn">Dismiss</button>
+      <button class="discord-btn" id="discord-btn">Join Discord</button>
+      <button class="get-started-btn" id="get-started-btn">Get Started</button>
+      </div>
+    </div>
+  `;
+
+  const dismiss = () => {
+    overlay.classList.add("fade-out");
+    overlay.addEventListener("transitionend", () => overlay.remove(), {
+      once: true,
+    });
+  };
+
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay) dismiss();
+  });
+
+  function openLink(url, newTab = true) {
+    if (!url) return;
+    if (newTab) {
+      window.open(url, "_blank", "noopener,noreferrer");
+    } else {
+      window.location.href = url;
+    }
+  }
+
+  const getStarted = () => openLink("{{get-started-link}}");
+  const openDiscord = () => openLink("{{discord-link}}");
+  overlay.querySelector("#close-x")?.addEventListener("click", dismiss);
+  overlay.querySelector("#dismiss-btn")?.addEventListener("click", dismiss);
+  overlay.querySelector("#discord-btn")?.addEventListener("click", openDiscord);
+  overlay.querySelector("#get-started-btn")?.addEventListener("click", getStarted);
+
+  document.body.prepend(overlay);
+}

package/dist/templates/theme/meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Theme",
+  "description": "scaffolding for your spicetify theme"
+}

package/dist/templates/theme/shared/.oxlintrc.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": null,
+  "categories": {},
+  "rules": {
+    "no-await-in-loop": "error",
+    "unicorn/prefer-array-find": "error",
+    "unicorn/prefer-array-flat-map": "error",
+    "unicorn/prefer-set-has": "error"
+  },
+  "settings": {
+    "jsx-a11y": {
+      "polymorphicPropName": null,
+      "components": {},
+      "attributes": {}
+    },
+    "react": {
+      "formComponents": [],
+      "linkComponents": [],
+      "version": null,
+      "componentWrapperFunctions": []
+    },
+    "jsdoc": {
+      "ignorePrivate": false,
+      "ignoreInternal": false,
+      "ignoreReplacesDocs": true,
+      "overrideReplacesDocs": true,
+      "augmentsExtendsReplacesDocs": false,
+      "implementsReplacesDocs": false,
+      "exemptDestructuredRootsFromChecks": false,
+      "tagNamePreference": {}
+    }
+  },
+  "globals": {},
+  "ignorePatterns": ["dist/**"]
+}

package/dist/templates/theme/shared/README.template.md

@@ -0,0 +1,53 @@
+# {{project-name}}
+
+Welcome to your new **Spicetify {{template}}** project! This project was
+bootstrapped using [@spicetify/creator]({{github-link}}).
+
+## Getting Started
+
+First, install the dependencies using your package manager:
+
+```bash
+{{package-manager}} install
+```
+
+Then, run the development server:
+
+```bash
+{{package-manager}} run dev
+```
+
+The development server will watch for changes and automatically rebuild your
+project.
+
+## Available Scripts
+
+### `dev`
+
+Runs the project in development mode with hot-reloading.
+
+### `build`
+
+Optimizes and bundles your {{template}} for production. The output will be
+located in the `dist` directory.
+
+### `lint`
+
+Checks your code for errors and formatting issues using {{linter}}.
+
+## Project Structure
+
+```text
+.
+├── src/
+│   └── app.{{entry-ext}}         # Main entry point for your {{template}}
+└── spice.config.{{language}} # Configuration for @spicetify/creator
+```
+
+## Learn More
+
+To learn more about Spicetify and how to customize your Spotify client, check
+out the following resources:
+
+- [Spicetify]({{spicetify-link}})
+- [@spicetify/creator]({{docs-link}})