@kokimoki/kit 1.2.0 → 1.4.0

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 (7) hide show
  1. package/dist/kokimoki-kit-plugin.d.ts +2 -0
  2. package/dist/kokimoki-kit-plugin.js +69 -8
  3. package/dist/preprocess-style.spec.d.ts +1 -0
  4. package/dist/preprocess-style.spec.js +75 -0
  5. package/dist/version.d.ts +1 -1
  6. package/dist/version.js +1 -1
  7. package/package.json +7 -3
package/dist/kokimoki-kit-plugin.d.ts CHANGED
@@ -8,5 +8,7 @@ export interface KokimokiKitConfig {
8
8
  description: string;
9
9
  clientContext: any;
10
10
  }[];
11
+ defaultProjectConfigPath?: string;
12
+ defaultProjectStylePath?: string;
11
13
  }
12
14
  export declare function kokimokiKitPlugin(config: KokimokiKitConfig): Plugin;
package/dist/kokimoki-kit-plugin.js CHANGED
@@ -1,4 +1,27 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
2
25
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
27
  };
@@ -8,18 +31,20 @@ const bson_objectid_1 = __importDefault(require("bson-objectid"));
8
31
  const promises_1 = __importDefault(require("fs/promises"));
9
32
  const preprocess_style_1 = require("./preprocess-style");
10
33
  const version_1 = require("./version");
34
+ const yaml = __importStar(require("yaml"));
11
35
  function kokimokiKitPlugin(config) {
12
36
  return {
13
37
  name: "kokimoki-kit",
14
38
  async transform(code, id) {
15
39
  if (id.endsWith("kokimoki.style.css")) {
40
+ console.warn(`[kokimoki-kit] importing kokimoki.style.css directly is deprecated, use defaultProjectStylePath instead`);
16
41
  return (0, preprocess_style_1.preprocessStyle)(code);
17
42
  }
18
43
  return code;
19
44
  },
20
45
  async transformIndexHtml(html) {
21
- // NOTE: Try https://github.com/jsdom/jsdom instead of regex parsing
22
46
  if (process.env.NODE_ENV !== "development") {
47
+ // NOTE: Try https://github.com/jsdom/jsdom instead of regex parsing
23
48
  return html
24
49
  .replace("<head>", `<head>
25
50
  <base href="%KM_BASE%">
@@ -37,7 +62,13 @@ function kokimokiKitPlugin(config) {
37
62
  }
38
63
  </script>
39
64
  <script>
40
- window.__toAssetsUrl = (path) => "%KM_ASSETS%/" + path;
65
+ window.__toAssetsUrl = (path) => {
66
+ if (path.startsWith("km-proxy")) {
67
+ return "/%KM_BUILD_ID%/" + path;
68
+ }
69
+
70
+ return "%KM_ASSETS%/" + path;
71
+ };
41
72
  </script>
42
73
  `)
43
74
  .replace(/<link.*?href="(.*?)".*?>/g, (match, p1) => {
@@ -73,6 +104,12 @@ function kokimokiKitPlugin(config) {
73
104
  appId = new bson_objectid_1.default().toHexString();
74
105
  await promises_1.default.writeFile(".kokimoki/app-id", appId);
75
106
  }
107
+ // Get default config
108
+ let defaultProjectConfig = config.form.value;
109
+ if (config.defaultProjectConfigPath) {
110
+ const defaultProjectConfigFile = await promises_1.default.readFile(config.defaultProjectConfigPath, "utf8");
111
+ defaultProjectConfig = yaml.parse(defaultProjectConfigFile);
112
+ }
76
113
  // Inject the app id into the index.html
77
114
  html = html.replace("<head>", `<head>
78
115
  <script id="kokimoki-env" type="application/json">
@@ -81,11 +118,16 @@ function kokimokiKitPlugin(config) {
81
118
  "test": true,
82
119
  "host": "y-wss.kokimoki.com",
83
120
  "appId": "${appId}",
84
- "configObject": ${JSON.stringify(config.form.value)},
121
+ "configObject": ${JSON.stringify(defaultProjectConfig)},
85
122
  "base": "/",
86
123
  "assets": "/"
87
124
  }
88
125
  </script>`);
126
+ // Inject default project style in development
127
+ if (config.defaultProjectStylePath) {
128
+ const defaultProjectStyle = await promises_1.default.readFile(config.defaultProjectStylePath, "utf8");
129
+ html = html.replace("</body>", `<style id="km-dev-style">${(0, preprocess_style_1.preprocessStyle)(defaultProjectStyle)}</style></body>`);
130
+ }
89
131
  return html;
90
132
  },
91
133
  // write kokimoki metadata to .kokimoki directory
@@ -96,13 +138,32 @@ function kokimokiKitPlugin(config) {
96
138
  conceptId: config.conceptId,
97
139
  deployCodes: config.deployCodes,
98
140
  build: "dist",
141
+ defaultProjectConfigPath: config.defaultProjectConfigPath,
142
+ defaultProjectStylePath: config.defaultProjectStylePath,
99
143
  }, null, 2));
100
144
  // write schema
101
- const schema = JSON.stringify(config.form.schema, null, 2);
102
- await promises_1.default.writeFile(".kokimoki/schema.json", schema);
103
- // write scheme defaults
104
- const defaultValue = JSON.stringify(config.form.value, null, 2);
105
- await promises_1.default.writeFile(".kokimoki/schema-defaults.json", defaultValue);
145
+ await promises_1.default.writeFile(".kokimoki/schema.json", JSON.stringify(config.form.schema, null, 2));
146
+ // write schema defaults as json
147
+ await promises_1.default.writeFile(".kokimoki/schema-defaults.json", JSON.stringify(config.form.value, null, 2));
148
+ // write schema defaults as yaml
149
+ await promises_1.default.writeFile(".kokimoki/schema-defaults.yaml", yaml.stringify(config.form.value));
150
+ },
151
+ configureServer(server) {
152
+ // reload when defaultProjectConfigPath or defaultProjectStylePath changes
153
+ if (config.defaultProjectConfigPath) {
154
+ server.watcher.add(config.defaultProjectConfigPath);
155
+ }
156
+ if (config.defaultProjectStylePath) {
157
+ server.watcher.add(config.defaultProjectStylePath);
158
+ }
159
+ server.watcher.on("change", (file) => {
160
+ if (config.defaultProjectConfigPath?.match(file) ||
161
+ config.defaultProjectStylePath?.match(file)) {
162
+ server.ws.send({
163
+ type: "full-reload",
164
+ });
165
+ }
166
+ });
106
167
  },
107
168
  };
108
169
  }
package/dist/preprocess-style.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/preprocess-style.spec.js ADDED
@@ -0,0 +1,75 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const preprocess_style_1 = require("./preprocess-style");
7
+ const assert_1 = __importDefault(require("assert"));
8
+ describe("rgb-utils", () => {
9
+ // data-theme detection
10
+ describe("data-theme detection", () => {
11
+ it("should transform data-theme=gfc content", () => {
12
+ const result = (0, preprocess_style_1.preprocessStyle)(`[data-theme=gfc] { --on-primary: #aabbcc; }`);
13
+ assert_1.default.equal(result, `[data-theme="gfc"] { --on-primary: 170 187 204; }`);
14
+ });
15
+ it("should transform data-theme='gfc' content", () => {
16
+ const result = (0, preprocess_style_1.preprocessStyle)(`[data-theme='gfc'] { --on-primary: #aabbcc; }`);
17
+ assert_1.default.equal(result, `[data-theme="gfc"] { --on-primary: 170 187 204; }`);
18
+ });
19
+ it('should transform data-theme="gfc" content', () => {
20
+ const result = (0, preprocess_style_1.preprocessStyle)(`[data-theme="gfc"] { --on-primary: #aabbcc; }`);
21
+ assert_1.default.equal(result, `[data-theme="gfc"] { --on-primary: 170 187 204; }`);
22
+ });
23
+ });
24
+ // gfc skeleton theme system
25
+ describe("gfc", () => {
26
+ it("should transform --on-primary hex value to rgb tuple", () => {
27
+ const result = (0, preprocess_style_1.preprocessStyle)(`[data-theme="gfc"] { --on-primary: #aabbcc; }`);
28
+ assert_1.default.equal(result, `[data-theme="gfc"] { --on-primary: 170 187 204; }`);
29
+ });
30
+ it("should generate color palette for --color-primary", () => {
31
+ const result = (0, preprocess_style_1.preprocessStyle)(`[data-theme="gfc"] { --color-primary: #ff0000; }`);
32
+ (0, assert_1.default)(result.includes("--color-primary-50:"));
33
+ (0, assert_1.default)(result.includes("--color-primary-100:"));
34
+ (0, assert_1.default)(result.includes("--color-primary-200:"));
35
+ (0, assert_1.default)(result.includes("--color-primary-300:"));
36
+ (0, assert_1.default)(result.includes("--color-primary-400:"));
37
+ (0, assert_1.default)(result.includes("--color-primary-500:"));
38
+ (0, assert_1.default)(result.includes("--color-primary-600:"));
39
+ (0, assert_1.default)(result.includes("--color-primary-700:"));
40
+ (0, assert_1.default)(result.includes("--color-primary-800:"));
41
+ (0, assert_1.default)(result.includes("--color-primary-900:"));
42
+ });
43
+ it("should not transform --p variable", () => {
44
+ const result = (0, preprocess_style_1.preprocessStyle)(`[data-theme="gfc"] { --p: white; }`);
45
+ assert_1.default.equal(result, `[data-theme="gfc"] { --p: white; }`);
46
+ });
47
+ });
48
+ // daisy theme system
49
+ describe("daisy", () => {
50
+ for (const theme of ["light", "dark"]) {
51
+ describe(theme, () => {
52
+ it("should transform theme name", () => {
53
+ const result = (0, preprocess_style_1.preprocessStyle)(`[data-theme="daisy-${theme}"] {}`);
54
+ assert_1.default.equal(result, `[data-theme="${theme}"] {}`);
55
+ });
56
+ it("should transform variables from hex to oklch tuple", () => {
57
+ const result = (0, preprocess_style_1.preprocessStyle)(`[data-theme="daisy-${theme}"] {\n--p: #7480ff;\n--pc: #050617;\n--b1: #1d232a;\n--bc: #a6adbb;\n}`);
58
+ assert_1.default.equal(result, `[data-theme="${theme}"] {\n--p: 65.3% 0.186 275.9;\n--pc: 13.3% 0.038 276.4;\n--b1: 25.3% 0.016 252.4;\n--bc: 74.6% 0.022 264.4;\n}`);
59
+ });
60
+ it("should transform variables from color names to oklch tuple", () => {
61
+ const result = (0, preprocess_style_1.preprocessStyle)(`[data-theme="daisy-${theme}"] { --p: red; }`);
62
+ assert_1.default.equal(result, `[data-theme="${theme}"] { --p: 62.8% 0.258 29.2; }`);
63
+ });
64
+ it("should transform achromatic color to oklch tuple", () => {
65
+ const result = (0, preprocess_style_1.preprocessStyle)(`[data-theme="daisy-${theme}"] { --p: white; }`);
66
+ assert_1.default.equal(result, `[data-theme="${theme}"] { --p: 100.0% 0.000 0.0; }`);
67
+ });
68
+ it("should not transform --on-primary variable", () => {
69
+ const result = (0, preprocess_style_1.preprocessStyle)(`[data-theme="daisy-${theme}"] { --on-primary: black; }`);
70
+ assert_1.default.equal(result, `[data-theme="${theme}"] { --on-primary: black; }`);
71
+ });
72
+ });
73
+ }
74
+ });
75
+ });
package/dist/version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const KOKIMOKI_KIT_VERSION = "1.2.0";
1
+ export declare const KOKIMOKI_KIT_VERSION = "1.4.0";
package/dist/version.js CHANGED
@@ -1,4 +1,4 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.KOKIMOKI_KIT_VERSION = void 0;
4
- exports.KOKIMOKI_KIT_VERSION = "1.2.0";
4
+ exports.KOKIMOKI_KIT_VERSION = "1.4.0";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kokimoki/kit",
3
- "version": "1.2.0",
3
+ "version": "1.4.0",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -8,7 +8,7 @@
8
8
  "dist"
9
9
  ],
10
10
  "scripts": {
11
- "test": "echo \"Error: no test specified\" && exit 1",
11
+ "test": "ts-mocha src/**/*.spec.ts --exit",
12
12
  "prebuild": "node -p \"'export const KOKIMOKI_KIT_VERSION = ' + JSON.stringify(require('./package.json').version) + ';'\" > src/version.ts",
13
13
  "build": "tsc"
14
14
  },
@@ -16,12 +16,16 @@
16
16
  "license": "Apache-2.0",
17
17
  "devDependencies": {
18
18
  "@types/colornames": "^1.1.4",
19
+ "@types/expect": "^24.3.2",
20
+ "mocha": "^11.1.0",
21
+ "ts-mocha": "^10.0.0",
19
22
  "vite": "^5.4.8"
20
23
  },
21
24
  "dependencies": {
22
25
  "bson-objectid": "^2.0.4",
23
26
  "colorjs.io": "^0.5.2",
24
- "colornames": "^1.1.1"
27
+ "colornames": "^1.1.1",
28
+ "yaml": "^2.7.0"
25
29
  },
26
30
  "peerDependencies": {
27
31
  "vite": ">=5"