colorfully - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

dist/index.js

 /*!
   *
-  * colorfully 0.0.0
+  * colorfully 0.0.1
   *
@@ -101,3 +101,4 @@ * Copyright 2021-present, City.
       this.map = Object.keys(map).reduce((m, type) => {
-        m[type] = new CSSStyleType(map[type].name, map[type].code, map[type].variables);
+        const item = map[type];
+        m[type] = new CSSStyleType(item.name, item.code, item.variables);
         return m;
@@ -104,0 +105,0 @@ }, {});

dist/index.min.js

 /*!
   *
-  * colorfully 0.0.0
+  * colorfully 0.0.1
   *
@@ -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)=>(e[s]=new t(a[s].name,a[s].code,a[s].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,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})}));

es/cssStyle.d.ts

@@ -21,3 +21,3 @@ /**
  */
-export declare class CSSStyleType<T extends Record<string, CSSStyleVariable>> {
+export declare class CSSStyleType {
     /**
@@ -34,4 +34,4 @@ * 名称
      */
-    map: T;
-    constructor(name: string, code: string, map: T);
+    map: Record<string, CSSStyleVariable>;
+    constructor(name: string, code: string, map: Record<string, CSSStyleVariable>);
     /**
@@ -44,3 +44,3 @@ * 获取所有类型变量
      */
-    get(code: keyof T | (string & Record<never, never>)): T[(string & Record<never, never>) | keyof T];
+    get(code: string): CSSStyleVariable;
     /**
@@ -53,7 +53,7 @@ * 创建类型变量
      */
-    delete(code: keyof T | (string & Record<never, never>)): void;
+    delete(code: string): void;
     /**
      * 修改类型变量
      */
-    change(code: keyof T | (string & Record<never, never>), value: string): void;
+    change(code: string, value: string): void;
 }
@@ -63,7 +63,3 @@ /**
  */
-export declare class CSSStyle<T extends Record<string, {
-    name: string;
-    code: string;
-    variables: Record<string, CSSStyleVariable>;
-}>> {
+export declare class CSSStyle<T extends string> {
     /**
@@ -81,21 +77,19 @@ * 名称
     map: {
-        [K in keyof T]: CSSStyleType<T extends Record<string, {
+        [K in T | (string & Record<never, never>)]: CSSStyleType;
+    };
+    constructor(name: string, code: string, map: {
+        [K in T]: {
             name: string;
             code: string;
-            variables: infer K;
-        }> ? K : void>;
-    };
-    constructor(name: string, code: string, map: T);
+            variables: Record<string, CSSStyleVariable>;
+        };
+    });
     /**
      * 获取所有样式类型
      */
-    getAll(): CSSStyleType<T extends Record<string, {
-        name: string;
-        code: string;
-        variables: infer K;
-    }> ? K : void>[];
+    getAll(): CSSStyleType[];
     /**
      * 获取某一样式类型
      */
-    get<K extends keyof T | (string & Record<never, never>)>(type: K): typeof this.map[K];
+    get<K extends T | (string & Record<never, never>)>(type: K): CSSStyleType;
     /**
@@ -108,11 +102,11 @@ * 创建样式类型
      */
-    delete(type: keyof T | (string & Record<never, never>)): void;
+    delete(type: T | (string & Record<never, never>)): void;
     /**
      * 包裹样式类型
      */
-    parcel(type: keyof T | (string & Record<never, never>), value: string): string;
+    parcel(type: T | (string & Record<never, never>), value: string): string;
     /**
      * 生成样式类型字符串
      */
-    toTypeString(type: keyof T | (string & Record<never, never>)): string;
+    toTypeString(type: T | (string & Record<never, never>)): string;
     /**
@@ -119,0 +113,0 @@ * 生成样式字符串

es/cssStyle.js

@@ -54,3 +54,4 @@ /**
     this.map = Object.keys(map).reduce(function (m, type) {
-      m[type] = new CSSStyleType(map[type].name, map[type].code, map[type].variables);
+      var item = map[type];
+      m[type] = new CSSStyleType(item.name, item.code, item.variables);
       return m;
@@ -57,0 +58,0 @@ }, {});

es/index.d.ts

@@ -5,3 +5,3 @@ import { CSSStyle } from './cssStyle';
 import { SchemaController } from './schemaController';
-import { ThemeConfig } from './types';
+import { ColorfullyConfig } from './types';
 export * from './cssStyle';
@@ -45,7 +45,7 @@ export * from './cssSchema';
      */
-    importConfig(conf: ThemeConfig): void;
+    importConfig(conf: ColorfullyConfig): void;
     /**
      * 导出配置
      */
-    exportConfig(): ThemeConfig;
+    exportConfig(): ColorfullyConfig;
 }

es/types.d.ts

 /**
  * 主题配置
  */
-export interface ThemeConfig {
+export interface ColorfullyConfig {
     /**
@@ -6,0 +6,0 @@ * 样式

package.json

 {
   "name": "colorfully",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Use Colorfully to define your interface!",
@@ -61,2 +61,2 @@ "keywords": [
   }
-}
+}

No alert changes

Worsened metrics

Total package byte prevSize

112570

decreased by-0.23%

Lines of code

3651

decreased by-0.11%

No dependency changes