colorfully - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/index.js

 /*!
   *
-  * colorfully 0.0.1
+  * colorfully 0.0.2
   *
@@ -300,5 +300,18 @@ * Copyright 2021-present, City.
       this.options = {
-        mode: options.mode || 'css'
+        mode: options.mode || 'css',
+        root: options.root || document.querySelector('html')
       };
     }
+
+    /**
+     * 派生类
+     */
+    derive(params) {
+      const colorfully = new Colorfully({
+        ...this.options,
+        ...params
+      });
+      colorfully.importConfig(this.exportConfig());
+      return colorfully;
+    }
     createStyleTag(styleList) {
@@ -321,3 +334,3 @@ return styleList.map(style => {
       const theme = this.schema.get(themeCode);
-      const html = document.querySelector('html');
+      const html = this.options.root;
       html?.getAttributeNames().forEach(name => {
@@ -324,0 +337,0 @@ if (name.includes('data-theme-')) html.removeAttribute(name);

dist/index.min.js

 /*!
   *
-  * colorfully 0.0.1
+  * colorfully 0.0.2
   *
@@ -9,2 +9,2 @@ * Copyright 2021-present, City.
   */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Colorfully={})}(this,(function(e){"use strict";class t{constructor(e,t,s){this.name=e,this.code=t,this.map=s}getAll(){return Object.values(this.map)}get(e){return this.map[e]}create(e,t,s){this.map[t]={name:e,code:t,value:s}}delete(e){delete this.map[e]}change(e,t){this.map[e].value=t}}class s{constructor(e,s,a){this.name=e,this.code=s,this.map=Object.keys(a).reduce(((e,s)=>{const r=a[s];return e[s]=new t(r.name,r.code,r.variables),e}),{})}getAll(){return Object.values(this.map)}get(e){return this.map[e]}create(e,s,a){this.map[s]=new t(e,s,a)}delete(e){delete this.map[e]}parcel(e,t){return`*[ data-theme-${this.code} = '${String(e)}' ] {\n${t}\n}`}toTypeString(e){return this.get(e).getAll().map((e=>`${e.code}: ${e.value};`)).join("\n")}toString(){return this.getAll().map((e=>this.parcel(e.code,this.toTypeString(e.code)))).join("\n\n")}}class a{constructor(e){this.map=e}getAll(){return Object.values(this.map)}get(e){return this.map[e]}create(e,t,a){this.map[t]=new s(e,t,a)}delete(e){delete this.map[e]}toStyleListByTheme(e){return Object.keys(e.map).map((t=>({code:t,css:this.map[t].parcel(e.map[t],this.map[t].toTypeString(e.map[t]))})))}toStyleList(){return Object.values(this.map).map((e=>({code:e.code,css:e.toString()})))}}class r{constructor(e,t,s){this.name=e,this.code=t,this.map=s}changeMap(e){this.map=e}}class o{constructor(e){this.map=e}getAll(){return Object.values(this.map)}get(e){return this.map[e]}create(e,t,s){this.map[t]=new r(e,t,s)}delete(e){delete this.map[e]}}e.CSSSchema=r,e.CSSStyle=s,e.CSSStyleType=t,e.Colorfully=class{constructor({styleMap:e,schemaMap:t,...s}={}){this.style=new a({...e||{}}),this.schema=new o({...t||{}}),this.options={mode:s.mode||"css"}}createStyleTag(e){return e.map((e=>{const t=document.createElement("style");return t.setAttribute("type","text/css"),t.setAttribute("data-theme-style",e.code),t.innerHTML=e.css,t}))}init=!1;use(e){const t=this.schema.get(e),s=document.querySelector("html");if(s?.getAttributeNames().forEach((e=>{e.includes("data-theme-")&&s.removeAttribute(e)})),Object.keys(t.map).forEach((e=>{const a=t.map[e];s?.setAttribute(`data-theme-${e}`,a)})),"css"===this.options.mode&&this.init)return;this.init=!0;const a=Array.from(document.querySelectorAll("style[data-theme-style]"));if("css"===this.options.mode){const e=this.style.toStyleList(),t=this.createStyleTag(e),s=document.querySelector("head"),r=s?.querySelector("style");return t.forEach((e=>s?.insertBefore(e,r))),void a.forEach((e=>e.parentElement?.removeChild(e)))}const r=this.style.toStyleListByTheme(t),o=this.createStyleTag(r),c=document.querySelector("head"),i=c?.querySelector("style");o.forEach((e=>c?.insertBefore(e,i))),a.forEach((e=>e.parentElement?.removeChild(e)))}importConfig(e){const{styles:t,schemas:s}=e;for(const e of t)this.style.create(e.name,e.code,e.types.reduce(((e,t)=>(e[t.code]={name:t.name,code:t.code,variables:t.variables.reduce(((e,t)=>(e[t.code]={...t},e)),{})},e)),{}));for(const e of s)this.schema.create(e.name,e.code,e.map)}exportConfig(){return{styles:this.style.getAll().map((e=>({name:e.name,code:e.code,types:e.getAll().map((e=>({name:e.name,code:e.code,variables:e.getAll()})))}))),schemas:this.schema.getAll().map((e=>({name:e.name,code:e.code,map:e.map})))}}},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Colorfully={})}(this,(function(e){"use strict";class t{constructor(e,t,s){this.name=e,this.code=t,this.map=s}getAll(){return Object.values(this.map)}get(e){return this.map[e]}create(e,t,s){this.map[t]={name:e,code:t,value:s}}delete(e){delete this.map[e]}change(e,t){this.map[e].value=t}}class s{constructor(e,s,o){this.name=e,this.code=s,this.map=Object.keys(o).reduce(((e,s)=>{const a=o[s];return e[s]=new t(a.name,a.code,a.variables),e}),{})}getAll(){return Object.values(this.map)}get(e){return this.map[e]}create(e,s,o){this.map[s]=new t(e,s,o)}delete(e){delete this.map[e]}parcel(e,t){return`*[ data-theme-${this.code} = '${String(e)}' ] {\n${t}\n}`}toTypeString(e){return this.get(e).getAll().map((e=>`${e.code}: ${e.value};`)).join("\n")}toString(){return this.getAll().map((e=>this.parcel(e.code,this.toTypeString(e.code)))).join("\n\n")}}class o{constructor(e){this.map=e}getAll(){return Object.values(this.map)}get(e){return this.map[e]}create(e,t,o){this.map[t]=new s(e,t,o)}delete(e){delete this.map[e]}toStyleListByTheme(e){return Object.keys(e.map).map((t=>({code:t,css:this.map[t].parcel(e.map[t],this.map[t].toTypeString(e.map[t]))})))}toStyleList(){return Object.values(this.map).map((e=>({code:e.code,css:e.toString()})))}}class a{constructor(e,t,s){this.name=e,this.code=t,this.map=s}changeMap(e){this.map=e}}class r{constructor(e){this.map=e}getAll(){return Object.values(this.map)}get(e){return this.map[e]}create(e,t,s){this.map[t]=new a(e,t,s)}delete(e){delete this.map[e]}}class c{constructor({styleMap:e,schemaMap:t,...s}={}){this.style=new o({...e||{}}),this.schema=new r({...t||{}}),this.options={mode:s.mode||"css",root:s.root||document.querySelector("html")}}derive(e){const t=new c({...this.options,...e});return t.importConfig(this.exportConfig()),t}createStyleTag(e){return e.map((e=>{const t=document.createElement("style");return t.setAttribute("type","text/css"),t.setAttribute("data-theme-style",e.code),t.innerHTML=e.css,t}))}init=!1;use(e){const t=this.schema.get(e),s=this.options.root;if(s?.getAttributeNames().forEach((e=>{e.includes("data-theme-")&&s.removeAttribute(e)})),Object.keys(t.map).forEach((e=>{const o=t.map[e];s?.setAttribute(`data-theme-${e}`,o)})),"css"===this.options.mode&&this.init)return;this.init=!0;const o=Array.from(document.querySelectorAll("style[data-theme-style]"));if("css"===this.options.mode){const e=this.style.toStyleList(),t=this.createStyleTag(e),s=document.querySelector("head"),a=s?.querySelector("style");return t.forEach((e=>s?.insertBefore(e,a))),void o.forEach((e=>e.parentElement?.removeChild(e)))}const a=this.style.toStyleListByTheme(t),r=this.createStyleTag(a),c=document.querySelector("head"),i=c?.querySelector("style");r.forEach((e=>c?.insertBefore(e,i))),o.forEach((e=>e.parentElement?.removeChild(e)))}importConfig(e){const{styles:t,schemas:s}=e;for(const e of t)this.style.create(e.name,e.code,e.types.reduce(((e,t)=>(e[t.code]={name:t.name,code:t.code,variables:t.variables.reduce(((e,t)=>(e[t.code]={...t},e)),{})},e)),{}));for(const e of s)this.schema.create(e.name,e.code,e.map)}exportConfig(){return{styles:this.style.getAll().map((e=>({name:e.name,code:e.code,types:e.getAll().map((e=>({name:e.name,code:e.code,variables:e.getAll()})))}))),schemas:this.schema.getAll().map((e=>({name:e.name,code:e.code,map:e.map})))}}}e.CSSSchema=a,e.CSSStyle=s,e.CSSStyleType=t,e.Colorfully=c,Object.defineProperty(e,"__esModule",{value:!0})}));

es/index.d.ts

@@ -26,2 +26,7 @@ import { CSSStyle } from './cssStyle';
     mode?: 'css' | 'js';
+    /**
+     * 主题根节点
+     * @default html
+     */
+    root?: HTMLElement;
 }
@@ -36,2 +41,6 @@ /**
     constructor({ styleMap, schemaMap, ...options }?: ThemeParameters<StyleMap, SchemaMap>);
+    /**
+     * 派生类
+     */
+    derive(params: Omit<ThemeParameters<StyleMap, SchemaMap>, 'styleMap' | 'schemaMap' | 'mode'>): Colorfully<StyleMap, SchemaMap>;
     private createStyleTag;
@@ -38,0 +47,0 @@ private init;

es/index.js

@@ -22,5 +22,14 @@ import { __assign, __rest } from './_virtual/_tslib.js';
     this.options = {
-      mode: options.mode || 'css'
+      mode: options.mode || 'css',
+      root: options.root || document.querySelector('html')
     };
   }
+  /**
+   * 派生类
+   */
+  Colorfully.prototype.derive = function (params) {
+    var colorfully = new Colorfully(__assign(__assign({}, this.options), params));
+    colorfully.importConfig(this.exportConfig());
+    return colorfully;
+  };
   Colorfully.prototype.createStyleTag = function (styleList) {
@@ -41,3 +50,3 @@ return styleList.map(function (style) {
     var theme = this.schema.get(themeCode);
-    var html = document.querySelector('html');
+    var html = this.options.root;
     html === null || html === void 0 ? void 0 : html.getAttributeNames().forEach(function (name) {
@@ -44,0 +53,0 @@ if (name.includes('data-theme-')) html.removeAttribute(name);

package.json

 {
   "name": "colorfully",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Use Colorfully to define your interface!",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

113526

increased by0.85%

Lines of code

3681

increased by0.82%

No dependency changes