* PokeApi-Explorer.html runs within dist/

* generate-mixin.js renders HTMLElementMixin.d.ts

Author: sashafirsov

build.sh

@@ -1,3 +1,4 @@
+node types/generate-mixin.js
 bash ./test.sh
 
 PACKAGE_VERSION=$(node -pe "require('css-chain/package.json').version")
@@ -6,6 +7,7 @@ echo $PACKAGE_VERSION
 rm -rf dist
 mkdir dist
 cp src/*.html dist
+cp src/*.d.ts dist
 sed "s/..\/src\/css-chain-element.js/css-chain-element.js/" src/demo.html >dist/demo.html
 
 # https://kangax.github.io/compat-table/es2016plus/

package-lock.json

@@ -1,6 +1,6 @@
 import FetchElement from 'https://unpkg.com/[email protected]/fetch-element.js';
-import { CssChain as $$ } from "https://unpkg.com/css-chain@1/CssChain.js";
-// import { CssChain as $$ } from "./CssChain.js";
+// import { CssChain as $$ } from "https://unpkg.com/css-chain@1/CssChain.js";
+import { CssChain as $$ } from "./CssChain.js";
 
 const arr2str = (arr,cb, separator='') => arr.map(cb).join(separator)
 ,   isImg = url => url && url.endsWith && ['png','gif','svg'].find( x=>url.endsWith(x) );

src/PokeApi-Explorer.js

@@ -8,11 +8,13 @@ CssChain.d.ts uses DOM definitions from
 
     npx -p typescript tsc src/*.js --declaration --allowJs --emitDeclarationOnly --outDir types
 ## 2. combine whole HTMLElement dependency tree 
+[generate-mixin.js](generate-mixin.js)
+
 From [typescript/lib/lib.dom.d.ts](https://github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts).
 
 1. Traverse over `lib.dom.d.ts` AST and create the inheritance tree for all interfaces.
 2. From inheritance tree collect all related to HTMLElement as collection of names
-3. by iterating over AST, dump out bodies of the interfaces from collection into DomMixinInterface
+3. by iterating over AST, dump out bodies of the interfaces from collection into HTMLElementMixin interface.
 
 #links
 * [Using TypeScript compiler](https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API)

types/TYPES.md

@@ -1,13 +1,11 @@
+// generator of HTMLElementMixin.d.ts
+
 import ts from "typescript";
 import fs  from 'fs';
 
 let checker, sourceFile;
 
 const getNodeName = node => node.name?.text;
-// checker.getSymbolAtLocation(node.name).getName();
-// checker.getFullyQualifiedName( checker.getSymbolAtLocation(node.name) )
-// node.name?.text;
-// node.name?.escapedText;
 
 function getParents( node /* ts.ClassDeclaration*/ )
 {
@@ -149,17 +147,19 @@ const methods =  Object.keys(member2types).map( m=>
 }).join('\n');
 
 /*
-    0. generated CssChain.d.ts edited manually and cloned into CssChain-manual.d.ts
-    1. create CssChain.d.ts
-    2. copy CssChain-manual.d.ts into CssChain.d.ts
-    3. append HTMLElementMixin.d.ts
+    0. CssChain.d.ts is generated out of CssChain.js and edited manually
+    1. HTMLElementMixin.d.ts is rendered by this script
  */
 
 var stream = fs.createWriteStream("src/HTMLElementMixin.d.ts");
 stream.once('open', function(fd) {
     stream.write(
-`import type { CssChainT} from './CssChain';
+`// generated by css-chain-test/types/ast-parse.js
 
+import type { CssChainT} from './CssChain';
+/** Mixin of HTMLElement inherited and parents from node_modules/typescript/lib/lib.dom.d.ts
+    all methods return CssChainT
+*/
 export interface HTMLElementMixin {
 `);
     stream.write(methods);