@spicemod/creator 0.0.30 → 0.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/bin.mjs +23 -16
  2. package/dist/templates/injectCSS.js +9 -0
  3. package/dist/templates/liveReload.js +1 -1
  4. package/dist/templates/wrapper.js +2 -9
  5. package/package.json +1 -1
  6. package/templates/injectCSS.js +9 -0
  7. package/templates/liveReload.js +1 -1
  8. package/templates/wrapper.js +2 -9
package/dist/bin.mjs CHANGED
@@ -140,11 +140,12 @@ const liveReloadFilePath = dist(`templates/liveReload.js`, import.meta.url);
140
140
  const hmrCustomAppFilePath = dist(`templates/hmrCustomApp.js`, import.meta.url);
141
141
  const templateWrapperFilePath = dist("templates/wrapper.js", import.meta.url);
142
142
  const customAppEntryFilePath = dist("templates/customAppEntry.js", import.meta.url);
143
+ const injectCSSFilePath = dist("templates/injectCSS.js", import.meta.url);
143
144
 
144
145
  //#endregion
145
146
  //#region package.json
146
147
  var name = "@spicemod/creator";
147
- var version = "0.0.30";
148
+ var version = "0.0.32";
148
149
 
149
150
  //#endregion
150
151
  //#region src/utils/common.ts
@@ -625,6 +626,7 @@ async function resolveContext(config) {
625
626
  config.outDir = resolve(cwd, config.outDir || "./dist");
626
627
  config.esbuildOptions ??= {};
627
628
  config.serverConfig ??= {};
629
+ if (config.template === "extension") config.cssId ??= `${varSlugify(getEnName(config.name))}_styles`;
628
630
  if (config.template === "custom-app") config.icon ??= {
629
631
  default: resolveDefaultIcon(cwd),
630
632
  active: resolveActiveIcon(cwd)
@@ -837,22 +839,29 @@ function inlineBundledCss(styleId) {
837
839
  return {
838
840
  name: "inline-bundled-css",
839
841
  setup(build) {
840
- build.onEnd((result) => {
842
+ build.onEnd(async (result) => {
841
843
  if (result.errors.length > 0 || !result.outputFiles) return;
842
- const cssFiles = result.outputFiles.filter((file) => file.path.endsWith(".css"));
843
- const jsFiles = result.outputFiles.filter((file) => file.path.endsWith(".js"));
844
- for (const cssFile of cssFiles) {
844
+ const outputFiles = result.outputFiles;
845
+ const cssFiles = outputFiles.filter((file) => file.path.endsWith(".css"));
846
+ const jsFiles = outputFiles.filter((file) => file.path.endsWith(".js"));
847
+ await Promise.all(cssFiles.map(async (cssFile) => {
845
848
  const cssContent = cssFile.text;
846
- const injectScript = `(function() {if (typeof document === 'undefined') return;var style = document.getElementById('${styleId}');if (!style) {style = document.createElement('style');style.id = '${styleId}';document.head.appendChild(style);}style.textContent = ${JSON.stringify(cssContent)};})();`;
849
+ const { code: injectScript } = await transform(readFileSync(injectCSSFilePath, "utf-8"), {
850
+ loader: "js",
851
+ define: {
852
+ __ESBUILD__STYLE_ID__: JSON.stringify(styleId),
853
+ __ESBUILD__CSS_CONTENT__: JSON.stringify(cssContent)
854
+ }
855
+ });
847
856
  const jsPath = cssFile.path.replace(/\.css$/, ".js");
848
857
  const jsFile = jsFiles.find((file) => file.path === jsPath);
849
858
  if (jsFile) {
850
859
  const updatedJsText = jsFile.text + injectScript;
851
860
  jsFile.contents = new TextEncoder().encode(updatedJsText);
852
- const cssIndex = result.outputFiles.indexOf(cssFile);
853
- if (cssIndex > -1) result.outputFiles.splice(cssIndex, 1);
861
+ const cssIndex = outputFiles.indexOf(cssFile);
862
+ if (cssIndex > -1) outputFiles.splice(cssIndex, 1);
854
863
  }
855
- }
864
+ }));
856
865
  });
857
866
  }
858
867
  };
@@ -1038,7 +1047,6 @@ function wrapWithLoader({ config, cache, outFiles, server, dev = false, logger =
1038
1047
  const outdir = resolve(build$3.initialOptions.outdir || "./dist");
1039
1048
  const bundledCss = getBundledCss(res.outputFiles, outdir, type, dev);
1040
1049
  const minify = build$3.initialOptions.minify;
1041
- const slug = varSlugify(`${name}_${version}`);
1042
1050
  const currentFilePaths = /* @__PURE__ */ new Set();
1043
1051
  for (const file of res.outputFiles) {
1044
1052
  const isJs = file.path.endsWith(".js");
@@ -1137,7 +1145,6 @@ function wrapWithLoader({ config, cache, outFiles, server, dev = false, logger =
1137
1145
  define: {
1138
1146
  __ESBUILD__HAS_CSS: JSON.stringify(type !== "theme" && bundledCss.length !== 0),
1139
1147
  __ESBUILD__INJECTED_CSS: JSON.stringify(bundledCss),
1140
- __ESBUILD__APP_SLUG: JSON.stringify(slug),
1141
1148
  __ESBUILD__APP_TYPE: JSON.stringify(type),
1142
1149
  __ESBUILD__APP_ID: JSON.stringify(varSlugify(name)),
1143
1150
  __ESBUILD__APP_VERSION: JSON.stringify(version)
@@ -2116,7 +2123,7 @@ async function createHmrServer(config, logger = createLogger("hmrServer")) {
2116
2123
 
2117
2124
  //#endregion
2118
2125
  //#region src/utils/hmr.ts
2119
- const injectHMRExtension = async (rootLink, wsLink, outFiles) => {
2126
+ const injectHMRExtension = async (rootLink, wsLink, outFiles, config) => {
2120
2127
  const extName = `sc-live-reload-helper.js`;
2121
2128
  const spiceConfig = await getSpicetifyConfig();
2122
2129
  const cleanup = () => {
@@ -2148,7 +2155,8 @@ const injectHMRExtension = async (rootLink, wsLink, outFiles) => {
2148
2155
  _HOT_RELOAD_LINK: JSON.stringify(wsLink),
2149
2156
  _JS_PATH: JSON.stringify(`/files/${outFiles.js}`),
2150
2157
  _CSS_PATH: JSON.stringify(outFiles.css ? `/files/${outFiles.css}` : `/files/app.css`),
2151
- _REMOVE_CMD: JSON.stringify(`spicetify config extensions sc-live-reload-helper.js- && spicetify apply`)
2158
+ _REMOVE_CMD: JSON.stringify(`spicetify config extensions sc-live-reload-helper.js- && spicetify apply`),
2159
+ _CSS_ID: JSON.stringify(config.template === "extension" && config.cssId ? config.cssId : "sc-injected-css")
2152
2160
  }
2153
2161
  });
2154
2162
  writeFileSync(outDir, code);
@@ -2263,7 +2271,7 @@ async function dev$1(options) {
2263
2271
  await server.start();
2264
2272
  const outFiles = getOutFiles(config, true);
2265
2273
  if (config.template === "custom-app") await injectHMRCustomApp(server.link, server.wsLink, outFiles, config);
2266
- else await injectHMRExtension(server.link, server.wsLink, outFiles);
2274
+ else await injectHMRExtension(server.link, server.wsLink, outFiles, config);
2267
2275
  ctx = await context(getJSDevOptions(config, {
2268
2276
  ...options,
2269
2277
  outFiles,
@@ -2304,8 +2312,7 @@ function getJSDevOptions(config, options) {
2304
2312
  minify,
2305
2313
  buildOptions: {
2306
2314
  copy: true,
2307
- apply: false,
2308
- applyOnce: false,
2315
+ apply: true,
2309
2316
  remove: config.template !== "custom-app",
2310
2317
  outDir
2311
2318
  },
package/dist/templates/injectCSS.js ADDED
@@ -0,0 +1,9 @@
1
+ (function () {
2
+ var style = document.getElementById(__ESBUILD__STYLE_ID__ || undefined);
3
+ if (!style) {
4
+ style = document.createElement("style");
5
+ style.id = __ESBUILD__STYLE_ID__ || undefined;
6
+ document.head.appendChild(style);
7
+ }
8
+ style.textContent = __ESBUILD__CSS_CONTENT__;
9
+ })();
package/dist/templates/liveReload.js CHANGED
@@ -5,7 +5,7 @@
5
5
  cssPath: _CSS_PATH,
6
6
  jsPath: _JS_PATH,
7
7
  removeCmd: _REMOVE_CMD,
8
- cssId: "sc-css-injected",
8
+ cssId: _CSS_ID || "sc-css-injected",
9
9
  jsId: "sc-js-injected",
10
10
  };
11
11
 
package/dist/templates/wrapper.js CHANGED
@@ -6,16 +6,9 @@ __ESBUILD__HAS_CSS &&
6
6
  style.setAttribute("data-app", __ESBUILD__APP_ID);
7
7
  style.textContent = css;
8
8
  document.head.appendChild(style);
9
- } catch {}
9
+ } catch { }
10
10
  })();
11
11
  (async () => {
12
- const _ID = `${__ESBUILD__APP_SLUG}-${__ESBUILD__APP_TYPE}`;
13
- if (!window.SpiceGlobals) window.SpiceGlobals = {};
14
- window.SpiceGlobals[_ID] = {
15
- id: __ESBUILD__APP_ID,
16
- version: __ESBUILD__APP_VERSION,
17
- };
18
- const { id: appId, version: v } = window.SpiceGlobals[_ID];
19
12
  const _wait = (p, a = 0) =>
20
13
  new Promise((res, rej) => {
21
14
  const i = setInterval(() => {
@@ -29,7 +22,7 @@ __ESBUILD__HAS_CSS &&
29
22
  if (S.Events?.webpackLoaded?.on) await new Promise((r) => S.Events.webpackLoaded.on(r));
30
23
  await _wait(() => S?.React && S?.ReactJSX && S?.ReactDOM && S?.Platform && S?.Player);
31
24
  // oxfmt-ignore
32
- console.info(`%c[${appId}] %cv${v} %cinitialized`, "color: #1DB954; font-weight: bold", "color: #888", "color: unset");
25
+ console.info(`%c[${__ESBUILD__APP_ID}:${__ESBUILD__APP_TYPE}] %cv${__ESBUILD__APP_VERSION} %cinitialized`, "color: #1DB954; font-weight: bold", "color: #888", "color: unset");
33
26
  // oxfmt-ignore
34
27
  "{{INJECT_START_COMMENT}}"
35
28
  (async function () {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spicemod/creator",
3
- "version": "0.0.30",
3
+ "version": "0.0.32",
4
4
  "description": "Easily make Spicetify extensions and themes",
5
5
  "keywords": [
6
6
  "cli",
package/templates/injectCSS.js ADDED
@@ -0,0 +1,9 @@
1
+ (function () {
2
+ var style = document.getElementById(__ESBUILD__STYLE_ID__ || undefined);
3
+ if (!style) {
4
+ style = document.createElement("style");
5
+ style.id = __ESBUILD__STYLE_ID__ || undefined;
6
+ document.head.appendChild(style);
7
+ }
8
+ style.textContent = __ESBUILD__CSS_CONTENT__;
9
+ })();
package/templates/liveReload.js CHANGED
@@ -5,7 +5,7 @@
5
5
  cssPath: _CSS_PATH,
6
6
  jsPath: _JS_PATH,
7
7
  removeCmd: _REMOVE_CMD,
8
- cssId: "sc-css-injected",
8
+ cssId: _CSS_ID || "sc-css-injected",
9
9
  jsId: "sc-js-injected",
10
10
  };
11
11
 
package/templates/wrapper.js CHANGED
@@ -6,16 +6,9 @@ __ESBUILD__HAS_CSS &&
6
6
  style.setAttribute("data-app", __ESBUILD__APP_ID);
7
7
  style.textContent = css;
8
8
  document.head.appendChild(style);
9
- } catch {}
9
+ } catch { }
10
10
  })();
11
11
  (async () => {
12
- const _ID = `${__ESBUILD__APP_SLUG}-${__ESBUILD__APP_TYPE}`;
13
- if (!window.SpiceGlobals) window.SpiceGlobals = {};
14
- window.SpiceGlobals[_ID] = {
15
- id: __ESBUILD__APP_ID,
16
- version: __ESBUILD__APP_VERSION,
17
- };
18
- const { id: appId, version: v } = window.SpiceGlobals[_ID];
19
12
  const _wait = (p, a = 0) =>
20
13
  new Promise((res, rej) => {
21
14
  const i = setInterval(() => {
@@ -29,7 +22,7 @@ __ESBUILD__HAS_CSS &&
29
22
  if (S.Events?.webpackLoaded?.on) await new Promise((r) => S.Events.webpackLoaded.on(r));
30
23
  await _wait(() => S?.React && S?.ReactJSX && S?.ReactDOM && S?.Platform && S?.Player);
31
24
  // oxfmt-ignore
32
- console.info(`%c[${appId}] %cv${v} %cinitialized`, "color: #1DB954; font-weight: bold", "color: #888", "color: unset");
25
+ console.info(`%c[${__ESBUILD__APP_ID}:${__ESBUILD__APP_TYPE}] %cv${__ESBUILD__APP_VERSION} %cinitialized`, "color: #1DB954; font-weight: bold", "color: #888", "color: unset");
33
26
  // oxfmt-ignore
34
27
  "{{INJECT_START_COMMENT}}"
35
28
  (async function () {