@jaisocx/tree 1.5.36 → 2.2.18

package/{README_WEBPACK.md → docs/README_WEBPACK.md}

@@ -1,18 +1,18 @@
 # Tree json tool examples
 
-1. [https://workspace.brightday.email/examples/ExampleTree/example-from-readme.html](https://workspace.brightday.email/examples/ExampleTree/example-from-readme.html)
+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://workspace.brightday.email/](https://workspace.brightday.email/)
+2. [https://sandbox.brightday.email/](https://sandbox.brightday.email/)
 
 
-3. [https://workspace.brightday.email/examples/ExampleTree/](https://workspace.brightday.email/examples/ExampleTree/)
+3. [https://sandbox.brightday.email/webpack_builds/ExampleTree/](https://sandbox.brightday.email/webpack_builds/ExampleTree/)
 
 
-4. [https://github.com/Jaisocx-Tools/Workspace/tree/main/code/ts/www/examples/ExampleTree](https://github.com/Jaisocx-Tools/Workspace/tree/main/code/ts/www/examples/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/code/ts/www/packages/Tree](https://github.com/Jaisocx-Tools/Workspace/tree/main/code/ts/www/packages/Tree)
+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)
 
 
 
@@ -30,7 +30,7 @@ npm install @jaisocx/tree
 import { Tree, TreeConstants } from "@jaisocx/tree";
 export { Tree, TreeConstants } from "@jaisocx/tree";
 
-// These lines make Tree class accessible in browser javascript, 
+// 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;
@@ -45,12 +45,12 @@ node_modules/@jaisocx/tree/webpack.aliases.json
 
 ### the single .css file, imported in the Tree.ts with the webpack alias
 ```
-node_modules/@jaisocx/tree/assets/tree-styles-main-webpack.css
+node_modules/@jaisocx/tree/MediaAndStyles/tree-styles-main-webpack.css
 ```
 
 this import statement here:
 ```
-import "@jaisocx-tree-assets/tree-styles-main-webpack.css";
+import "@jaisocx-tree-MediaAndStyles/tree-styles-main-webpack.css";
 ```
 
 
@@ -60,7 +60,7 @@ import "@jaisocx-tree-assets/tree-styles-main-webpack.css";
 when under docker:
 ```
 docker compose exec ts bash
-cd www/examples/ExampleTree
+cd www/webpack_builds/ExampleTree
 ```
 
 when the console is on the ExampleTree package root path:
@@ -88,10 +88,10 @@ console.log( WebpackAliases );
 
 
 export default {
-  entry: './build/ESNext/index.js', // Entry point for your TypeScript code
+  entry: './transpiled/ESNext/index.js', // Entry point for your TypeScript code
   output: {
     filename: 'example-tree-bundle.js', // Output bundle name
-    path: path.resolve(__dirname, 'build/webpack'), 
+    path: path.resolve(__dirname, 'transpiled/webpack'),
   },
   resolve: {
     alias: {
@@ -99,7 +99,7 @@ export default {
     },
     extensions: [".js", ".json", ".css"],
     fallback: {
-      "path": "path-browserify", 
+      "path": "path-browserify",
     },
   },
   module: {
@@ -107,7 +107,7 @@ export default {
       {
         test: /\.css$/,
         use: [
-          'style-loader', 
+          'style-loader',
           'css-loader',
           {
             loader: 'postcss-loader',
@@ -131,14 +131,14 @@ export default {
         test: /\.(woff|woff2|eot|ttf)$/,
         type: 'asset/resource', // Use Webpack 5's native asset modules for images
         generator: {
-          filename: 'assets/fonts/[name][ext]', // Define output path for assets
+          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: 'assets/images/[name][ext]', // Define output path for assets
+          filename: 'MediaAndStyles/images/[name][ext]', // Define output path for MediaAndStyles
         },
       },
     ],
@@ -158,17 +158,17 @@ export default {
   "private": false,
   "description": "",
   "type": "module",
-  "main": "./build/CommonJS/index.js",
-  "types": "./build/ESNext/index.d.ts",
-  "module": "./build/ESNext/index.js",
+  "main": "./transpiled/CommonJS/index.js",
+  "types": "./transpiled/ESNext/index.d.ts",
+  "module": "./transpiled/ESNext/index.js",
   "exports": {
-    "require": "./build/CommonJS/index.js",
-    "import": "./build/ESNext/index.js"
+    "require": "./transpiled/CommonJS/index.js",
+    "import": "./transpiled/ESNext/index.js"
   },
   "files": [
-    "build/CommonJS",
-    "build/ESNext",
-    "assets/",
+    "transpiled/CommonJS",
+    "transpiled/ESNext",
+    "MediaAndStyles/",
     "README.md",
     "LICENSE"
   ],
@@ -207,7 +207,7 @@ export default {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <!-- th path to webpack built bundle.js here: -->
-    <script src="build/webpack/example-tree-bundle.js"></script>
+    <script src="transpiled/webpack/example-tree-bundle.js"></script>
   </head>
   <body>
 
@@ -224,7 +224,7 @@ export default {
           .setNodesWithIcons(true)
           .setNodesOpenedMode(TreeConstants.NodesOpenedMode.ALL_SHOWN)
           .setRenderingMode(TreeConstants.RenderingMode.Ease)
-          .render( data ); 
+          .render( data );
       }
 
       document.addEventListener('DOMContentLoaded', () => {
@@ -243,9 +243,9 @@ export default {
 
 
 
-### THEMES: Assets like miniimages and fonts resolval in bundle.js
-1. for assets in themes files, use webpack.aliases.js like in packages/Tree project.
-2. in the Tree.ts, import main css entrypoint file "@jaisocx-tree-assets/tree-styles-main-webpack.css";
+### 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:
 
@@ -253,15 +253,15 @@ export default {
 
 .tree > ul > li > pre > pre.jstree-html-node-holder-icon.icon-show
 {
-  --datatype-array--image-url: url('@jaisocx-tree-assets/themes/theme-base/mini-images/data-types/icons8-json-96.png');
-  --datatype-object--image-url: url('@jaisocx-tree-assets/themes/theme-base/mini-images/data-types/icons8-json-96.png');
+  --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 build/Simple
+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.
 

package/docs/README_preview.md

@@ -0,0 +1,167 @@
+# 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
+