npm - @jaisocx/tree - Versions diffs - 2.2.18 → 2.2.20 - Mend

@jaisocx/tree 2.2.18 → 2.2.20

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 (171) hide show

package/tree_preview_prod.html CHANGED Viewed

@@ -2,68 +2,38 @@
 <html lang="en" class="jsx">
 <head>
-  <title>Tree Preview</title>
-  <base href="./" />
+  <link
+      id="icon_jaisocx"
+      rel="icon"
+      type="image/x-icon"
+      href="node_modules/@jaisocx/css_clean_start_lite/favicon/Icon_Jaisocx.ico"
+      href-fallback="../css_clean_start_lite/favicon/Icon_Jaisocx.ico"
+      onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
+  />
-  <meta charset="utf-8" />
-  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+  <title> Jaisocx Tree </title>
-    <link
-        id="icon_jaisocx"
-        rel="icon"
-        type="image/x-icon"
-        href="node_modules/@jaisocx/css-clean-start-2/favicon/Icon_Jaisocx.ico"
-        href-fallback="../css-clean-start-2/favicon/Icon_Jaisocx.ico"
-        onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
-    />
+  <base href="./" />
-<!--    <link-->
-<!--            id="icon_brightday"-->
-<!--            rel="icon"-->
-<!--            type="image/x-icon"-->
-<!--            href="node_modules/@jaisocx/css-clean-start-2/favicon/Icon_Sandbox_Brightday.ico"-->
-<!--            href-fallback="../css-clean-start-2/favicon/Icon_Sandbox_Brightday.ico"-->
-<!--            onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"-->
-<!--    />-->
+  <meta charset="utf-8" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-  <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
-  <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB  -->
-  <!-- <link
-    rel="stylesheet"
-    type="text/css"
-    charset="utf-8"
-    href="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
-    href-fallback="../css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
-    onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
-  /> -->
-  <!--# THE SAME importing @jaisocx/css-clean-start-2 IN PROD MODE, PACKED BY @jaisocx/css-importer TOOL  -->
+  <!--# CSS CLEAN START LITE: html & css WHEN STARTING A SITE FROM SCRATCH -->
   <link
-    rel="stylesheet"
-    type="text/css"
-    charset="utf-8"
-    href="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
-    href-fallback="../css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
-    onerror="javascript: ( () => { this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
+      rel="stylesheet"
+      type="text/css"
+      charset="utf-8"
+      href="node_modules/@jaisocx/css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
+      href-fallback="../css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
+      onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
   />
-  <!--# STYLES Tree and theme_base -->
-  <!-- DEV MODE -->
-<!--  <link-->
-<!--    rel="stylesheet"-->
-<!--    type="text/css"-->
-<!--    charset="utf-8"-->
-<!--    href="MediaAndStyles/Tree_main_Relative.css"-->
-<!--  />-->
-  <!-- PROD MODE -->
   <link
     rel="stylesheet"
     type="text/css"
@@ -81,33 +51,48 @@
-    <style>
+    <style naame="css_clean_start_overrides">
-        .jsx {
-          --jsx--css-clean-start-2--body-tag--background: white;
-          --jsx--css-clean-start-2--site--background: #fff5f0;
+      .jsx {
+        --jsx--css-clean-start-2--body-tag--background: white;
+        --jsx--css-clean-start-2--site--background: #fff5f0;
-          --jsx--css-clean-start-2--site--padding: 2rem 1rem 3rem 1rem;
+        --jsx--css-clean-start-2--site--padding: 2rem 1rem 3rem 1rem;
-          --jsx--css-clean-start-2--h1--font-size: 1.05rem;
-          --jsx--css-clean-start-2--h2--font-size: 0.9rem;
-          --jsx--css-clean-start-2--h3--font-size: 0.83rem;
+        --jsx--css-clean-start-2--h1--font-size: 1.05rem;
+        --jsx--css-clean-start-2--h2--font-size: 0.9rem;
+        --jsx--css-clean-start-2--h3--font-size: 0.83rem;
-          --jsx--css-clean-start-2--h2--font-weight: 500;
+        --jsx--css-clean-start-2--h2--font-weight: 500;
+        --theme-button--width: fit-content;
+        --theme-button--font-size: 0.795rem;
+      }
+      .jsx .theme-funny.tree {
+        --node-label--font-family: Niconne;
+      }
-          --theme-button--width: fit-content;
-          --theme-button--font-size: 0.795rem;
-        }
-        .jsx .theme-funny.tree {
-          --node-label--font-family: Niconne;
+      @media screen and ( min-width: 2px) and (max-width: 767px) {
+        .jsx {
+          --jsx--css-clean-start-2--site--min-width: 100%;
+          --jsx--css-clean-start-2--site--max-width: 100%;
+          --jsx--css-clean-start-2--site--width: 100%;
         }
-        @media screen and (orientation: portrait) {
-          .jsx description {
-            display: none;
-          }
+        .jsx h2,
+        .jsx h3,
+        .jsx description {
+          display: none;
         }
+      }
+    </style>
+    <style name="theme_buttons">
         .jsx themebuttons {
           width: fit-content;
@@ -145,6 +130,12 @@
           font-family: fantasy;
         }
+    </style>
+    <style>
         .jsx main content {
             width: 100%;
             min-width: 100%;
@@ -176,6 +167,7 @@
             max-height: 2rem;
             margin-right: 1rem;
         }
     </style>
@@ -190,6 +182,7 @@
         <h1>Tree styling JSON Data</h1>
         <h2>@jaisocx/tree</h2>
         <h3>tree_preview_prod.html</h3>
         <description>
             Css sites tool styling json data to a tree view. Css for sites tools are packed with @jaisocx/css-importer.
             Js loaded from node_modules with ScriptsChainedLoader.
@@ -200,7 +193,7 @@
         <themebuttons>
-            <button id="button-turn-on-base-theme" data-theme="">Base Theme</button>
+            <button id="button-turn-on-base" data-theme="">Base Theme</button>
             <button id="button-turn-on-daymode" data-theme="theme_lightmode">Day Mode</button>
             <button id="button-turn-on-nightmode" data-theme="theme_darkmode">Night Mode</button>
         </themebuttons>
@@ -252,6 +245,7 @@
   let glob_TreeJson_SubtreeArrayOfObjects      = new Array();
   let glob_TreeJson_SubtreeLikeObjects         = new Object();
+  let glob_TreeJson_Url                        = "data/tree.json";
@@ -373,7 +367,7 @@
   // e.g. label text, Tree node html holding element css classes names, and similar.
   // -------------------
-  // START TREE CONF DATA
+  // START TREE DATA
   glob_TreeJson_SubtreeArrayOfObjects = [
     {
       "icon": "MediaAndStyles/themes/theme_base/mini_images/home_tree_mode_conf/house.png",
@@ -475,7 +469,7 @@
     }
   };
   // -------------------
-  // END TREE CONF DATA
+  // END TREE DATA
@@ -627,7 +621,7 @@
       this.loadDataAndRenderTree (
         "example-tree-holder_SubtreeArrayOfObjects",
-        "https://sandbox.brightday.email/cdn/www/data_public/json/tree-data/tree-data-to-use-with-conf.json"
+        glob_TreeJson_Url
       );
     }

package/webpack.aliases.json CHANGED Viewed

File without changes

package/docs/README_WEBPACK.md DELETED Viewed

@@ -1,279 +0,0 @@
-# Tree json tool examples
-1. [https://sandbox.brightday.email/webpack_builds/ExampleTree/example-from-readme.html](https://sandbox.brightday.email/webpack_builds/ExampleTree/example-from-readme.html)
-2. [https://sandbox.brightday.email/](https://sandbox.brightday.email/)
-3. [https://sandbox.brightday.email/webpack_builds/ExampleTree/](https://sandbox.brightday.email/webpack_builds/ExampleTree/)
-4. [https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/www/webpack_builds/ExampleTree](https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/www/webpack_builds/ExampleTree)
-5. [https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/www/sites_tools/js_tools/Tree](https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/www/sites_tools/js_tools/Tree)
-## how to develop with ts or js and build with webpack
-```
-npm install @jaisocx/tree
-```
-### a .js or .ts file
-```
-import { Tree, TreeConstants } from "@jaisocx/tree";
-export { Tree, TreeConstants } from "@jaisocx/tree";
-// These lines make Tree class accessible in browser javascript,
-//    when loaded in html with <script src"">
-(window as any).Tree = Tree;
-(window as any).TreeConstants = TreeConstants;
-```
-### The .json file with paths alias, used for webpack builds:
-```
-node_modules/@jaisocx/tree/webpack.aliases.json
-```
-### the single .css file, imported in the Tree.ts with the webpack alias
-```
-node_modules/@jaisocx/tree/MediaAndStyles/tree-styles-main-webpack.css
-```
-this import statement here:
-```
-import "@jaisocx-tree-MediaAndStyles/tree-styles-main-webpack.css";
-```
-### build with webpack
-when under docker:
-```
-docker compose exec ts bash
-cd www/webpack_builds/ExampleTree
-```
-when the console is on the ExampleTree package root path:
-```
-npm run webpack --config=webpack.config.mjs
-```
-### webpack.config.mjs example
-```
-import * as path from "node:path";
-import { fileURLToPath } from "node:url";
-// import * as pathBrowserify from "path-browserify";
-import postcssUrl from "postcss-url";
-import { WebpackAliases } from '@jaisocx/tree/WebpackAliases';
-let __filename = fileURLToPath(import.meta.url);
-let __dirname = path.dirname(__filename);
-console.info(path.resolve(__dirname));
-console.log( WebpackAliases );
-export default {
-  entry: './transpiled/ESNext/index.js', // Entry point for your TypeScript code
-  output: {
-    filename: 'example-tree-bundle.js', // Output bundle name
-    path: path.resolve(__dirname, 'transpiled/webpack'),
-  },
-  resolve: {
-    alias: {
-      ...WebpackAliases.resolve.alias,
-    },
-    extensions: [".js", ".json", ".css"],
-    fallback: {
-      "path": "path-browserify",
-    },
-  },
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          {
-            loader: 'postcss-loader',
-            options: {
-              postcssOptions: {
-                plugins: [
-                  postcssUrl({
-                    url: 'rebase', // Rewrite URLs relative to the final CSS file
-                  }),
-                ],
-              },
-            },
-          },
-        ], // Use these loaders for CSS files
-      },
-      {
-        test: /\.(webp|png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
-        type: 'asset/resource', // Handles images and fonts
-      },
-      {
-        test: /\.(woff|woff2|eot|ttf)$/,
-        type: 'asset/resource', // Use Webpack 5's native asset modules for images
-        generator: {
-          filename: 'MediaAndStyles/fonts/[name][ext]', // Define output path for MediaAndStyles
-        },
-      },
-      {
-        test: /\.(webp|png|jpg|gif|svg)$/,
-        type: 'asset/resource', // Use Webpack 5's native asset modules for images
-        generator: {
-          filename: 'MediaAndStyles/images/[name][ext]', // Define output path for MediaAndStyles
-        },
-      },
-    ],
-  },
-  mode: 'production', // Set mode (development | production)
-};
-```
-### package.json example to use with Tree and build with Webpack
-```
-{
-  "name": "@jaisocx/example-tree",
-  "version": "1.5.2",
-  "private": false,
-  "description": "",
-  "type": "module",
-  "main": "./transpiled/CommonJS/index.js",
-  "types": "./transpiled/ESNext/index.d.ts",
-  "module": "./transpiled/ESNext/index.js",
-  "exports": {
-    "require": "./transpiled/CommonJS/index.js",
-    "import": "./transpiled/ESNext/index.js"
-  },
-  "files": [
-    "transpiled/CommonJS",
-    "transpiled/ESNext",
-    "MediaAndStyles/",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "build": "tsc -p ./tsconfig.json",
-    "webpack": "webpack"
-  },
-  "optionalDependencies": {
-    "@jaisocx/tree": "^1.5.x"
-  },
-  "devDependencies": {
-    "css-loader": "^7.1.2",
-    "file-loader": "^6.2.0",
-    "path-browserify": "^1.0.1",
-    "postcss-loader": "^8.1.1",
-    "postcss-url": "^10.1.3",
-    "style-loader": "^4.0.0",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.7.x",
-    "webpack": "^5.96.1",
-    "webpack-cli": "^5.1.4"
-  },
-  "keywords": [],
-  "author": "Jaisocx",
-  "license": "ISC"
-}
-```
-### How to use the bundle.js by the Webpack in html
-```
-<html>
-  <head>
-    <title>Tree Example</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- th path to webpack built bundle.js here: -->
-    <script src="transpiled/webpack/example-tree-bundle.js"></script>
-  </head>
-  <body>
-    <h1>Tree example</h1>
-    <div id="tree-holder" class="theme-base"></div>
-    <script>
-      function renderDataLikeTree( data ) {
-        let tree = new Tree();
-        tree
-          .setMainHtmlNodeId("tree-holder")
-          .setNodesWithIcons(true)
-          .setNodesOpenedMode(TreeConstants.NodesOpenedMode.ALL_SHOWN)
-          .setRenderingMode(TreeConstants.RenderingMode.Ease)
-          .render( data );
-      }
-      document.addEventListener('DOMContentLoaded', () => {
-        // get data from a https endpoint:
-        fetch("https://api.artic.edu/api/v1/artworks")
-          .then( response => response.json() )
-          .then( data => renderDataLikeTree( data ) );
-      });
-    </script>
-  </body>
-</html>
-```
-### THEMES: MediaAndStyles like miniimages and fonts resolval in bundle.js
-1. for MediaAndStyles in themes files, use webpack.aliases.js like in sites_tools/js_tools/Tree project.
-2. in the Tree.ts, import main css entrypoint file "@jaisocx-tree-MediaAndStyles/tree-styles-main-webpack.css";
-3. in tree-styles-main-webpack.css import theme main css file like this: @import url('themes/theme-base/theme-base-webpack.css');
-4. use webpack.aliasese.js alias like this:
-```
-.tree > ul > li > pre > pre.jstree-html-node-holder-icon.icon-show
-{
-  --datatype-array--image-url: url('@jaisocx-tree-MediaAndStyles/themes/theme-base/mini-images/data-types/icons8-json-96.png');
-  --datatype-object--image-url: url('@jaisocx-tree-MediaAndStyles/themes/theme-base/mini-images/data-types/icons8-json-96.png');
-}
-```
-5. without the webpack build, use another relative urls in the .css files, loaded in <link rel="stylesheet" href="">.
-6. with webpack produced bundle.js, several themes can be imported, and then used in html holder node <div id="tree-1" class="theme-extended-1">
-7. when copying to the webpack build theme css files, urls have to be rewritten absolute, starting with / , and not relative like when working in browser with transpiled/Simple
-8. have to try with other data, like .json and other.
-9. in json the urls have to be absolute, or base64 contents.
-### index.ts
-the classes, required in script tags and other custom js, using this js ui tool, have to be avaliable like this:
-```
-import { Tree, TreeConstants } from "@jaisocx/tree";
-export { Tree, TreeConstants } from "@jaisocx/tree";
-(window as any).Tree = Tree;
-(window as any).TreeConstants = TreeConstants;
-```

package/docs/README_preview.md DELETED Viewed

@@ -1,167 +0,0 @@
-# PREVIEW Of Sites Tools, Published For Npm Or Yarn
-## The Aim Of The Setup
-To preview the sites tool when installed via `npm i` or `yarn add`
-### Preface
-A sites tool, published on npm,
-may be installed via npm or yarn to a js single page application,
-built with js frameworks like React, Angular, Vue3, NextJS
-with a js framework single base component for a sites tool
-implementing a base interface in the namespace of a js sites tools developer or company.
-Js|Ts developers prefer to keep npm repos registry well seeing
-when navigating and installing other sites tools
-and for own company marketing and pr purposes.
-The npm and yarn repos registry has the rules:
-1. to publish `README.md`. We publish for preview one more in addition: `index.example.html`
-2. to avoid or minimize publishing other files than json conf, css and js code.
-When having tested sites tools, I've encountered and implemented
-several efficiency optimization workarounds,
-like these:
-1. traffic cost `save up` (prevented, on single site load, loading several times the same fonts and images);
-2. foreseen `timestamps of loading` resources like images and fonts (prevented interactivity layout jumps);
-3. fallback urls for `node_modules` after npm install --install-strategy=hoisted, when installed just one npm package. The relative nested level of `node_modules` path is not to foresee;
-4. fallback urls bugfixes for the cases, when a cdn isn't responding or the internet connectivity isn't there (when installed a sites tool via npm, and other time later tried to preview the sites tool without internet connection).
-### Example Flow:
-1. install `npm i @jaisocx/tree`
-2. open `node_modules/@jaisocx/tree`. in FileSystem Explorer the folder `node_modules/@jaisocx/tree`
-3. open `index.example.html`.
-   3.1. in the FileSystem Explorer,
-       open by tap or mouse double click `index.example.html`,
-       or with context menu `Open with...` and choose the browser to open this file with.
-   3.2. if having the folder published with a sites server on url `https://your-domain/cdn/sites-tools/`,
-       navigate in browser:
-```
-https://your-domain/cdn/sites-tools/node_modules/@jaisocx/tree/index.example.html
-```
-In both cases, 3.1. and 3.2, the sites tool example is being shown the right way,
-like the sites tools developer has had tested before has published to npm.
-### Preview .html Modes
-#### 1. Production Mode
-*index.example.html*, *tree_preview_prod.html*
-The production mode preview may be opened in browser both in `local file system` with fs path and `sites server` with url.
-For this purpose, the fallback relative urls task was solved.
-##### 1.1 fallback urls workarounds:
-    1.1.1 node_modules
-    1.1.2. cdn not responding npm package with base resources like images and fonts.
-    1.1.3. DOMContentLoaded resolved when loaded with fallback urls after DOMContentLoaded.
-##### 1.2. traffic save up workarounds:
-    1.2.1. @jaisocx/preloader for single load.
-##### 1.3. cdn not responding workarounds for @jaisocx/preloader ( and when preview offline):
-    1.3.1. preventing blocking of the site render, the cleanup script to delete cdn preload links
-    1.3.2. preventing default font, for a not loaded font from cdn, have set the fallback fonts names in styles.
-##### 1.4. request events number minimized.
-    1.4.1. sites tool's base styles are loaded with one ..._resolved_minimal.css file
-#### 2. Development Mode
-*tree_preview_dev.html*
-html file for testing and tryout purposes in development mode:
-    2.1. without heavy scripts load for preloads and fallback urls.
-    2.2. loading styles in relative mode, You see every of 30 files in the filesets for the responsive feature
-    2.3. loading js classes in simple mode ( the easiest to view in browser's dev console legacy legacy mode ).
-### Problems Solved
-#### Sites tools preview problems
-1. Preview of a sites tool and of source code was not easy.
-2. When a cdn is not responding or the internet isn't turned on,
-    the sites tool has to look good, nevertheless.
-#### The normal and rare sites and sites tools problems need optimization and fine-tuning.
-1. the css and js sources were not to view easy and transparent.
-2. The fonts are not explicitly loaded
-    and may fallback to default fonts, if not installed on a client device OS.
-3. Same media files like images and fonts are loaded several times with traffic unneeded cost.
-4. When the efficient pattern LazyLoad is turned on in a client browser,
-    some resources are loading in browser later
-    in unexpected for testers and surfers timestamps,
-    and interactivity layout jumps may occure.
-5. when having installed a sites tool with npm,
-    the relative paths to styles and scripts don't work,
-    since the relative paths in `node_modules` may be one or two levels above,
-    or inside the `node_modules` two levels deep.
-6. fonts and media like images in npm packages examples
-    are in most cases not loading, since cdn url has changed,
-    or viewing the example offline.
-### Friendly Greetings
-Have a nice day and stay in touch,
-Elias Jaisocx.com Software Architect and Developer

package/favicon/Icon_Jaisocx.ico DELETED Viewed

Binary file

package/favicon/Icon_Sandbox_Brightday.ico DELETED Viewed

Binary file