@alkimia/framework 0.1.0

package/components/mocked-services/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "mocked-services",
+  "version": "1.0.0",
+  "description": "serves to expose a local node express server to provide support for backend mocked functionalities",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "run": "node-dev index.js --watch",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "body-parser": "^1.20.3",
+    "cors": "^2.8.5",
+    "express": "^4.21.1",
+    "otplib": "^12.0.1"
+  },
+  "devDependencies": {
+    "node-dev": "^8.0.0"
+  }
+}

package/eslint.config.mjs

@@ -0,0 +1,69 @@
+import stylisticJs from '@stylistic/eslint-plugin-js'
+
+export default [
+  {
+    files: ["**/*.js", "**/*.jsx", "**/*.json"],
+    ignores: ["node_modules/**", "dist/**", "build/**"],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: "module"
+    },
+    plugins: {
+      '@stylistic/js': stylisticJs
+    },
+    rules: {
+      semi: ["error", "always"],
+      quotes: ["error", "double"],
+      indent: ["error", 2, {
+        SwitchCase: 1,
+        VariableDeclarator: { var: 2, let: 2, const: 3 },
+        outerIIFEBody: 1,
+        MemberExpression: 1,
+        FunctionDeclaration: { parameters: 1, body: 1 },
+        FunctionExpression: { parameters: 1, body: 1 },
+        CallExpression: { arguments: 1 },
+        ArrayExpression: 1,
+        ObjectExpression: 1,
+        ImportDeclaration: 1,
+        flatTernaryExpressions: false,
+        ignoreComments: false,
+      }],
+      "comma-dangle": ["error", "never"],
+      "eol-last": ["error", "always"],
+      "brace-style": ["error", "stroustrup"],
+      // "space-before-blocks": ["error", "never"],
+      eqeqeq: ["error", "always"],
+      curly: ["error", "all"],
+      "space-before-function-paren": ["error", "never"],
+      // "space-before-function-paren": ["error", {
+      //   "anonymous": "always",
+      //   "named": "never",
+      //   "asyncArrow": "always"
+      // }],
+      "padding-line-between-statements": ["error",
+        { blankLine: "always", prev: "var", next: "return" }
+      ],
+      "require-await": "warn",
+      "no-unused-vars": ["warn", { vars: "all", args: "after-used", ignoreRestSiblings: false }],
+      // "no-trailing-spaces": "error",
+      "no-redeclare": "error",
+      "no-var": "warn",
+      "prefer-const": "warn",
+      "comma-spacing": "warn",
+      'no-multi-spaces': ['error'],
+
+      // '@stylistic/js/no-multiple-empty-lines': ['max', 2],
+      '@stylistic/js/no-multiple-empty-lines': ["error", { "max": 2, "maxEOF": 0 }]
+      // "arrow-spacing": ["error", { before: true, after: true }],
+      // "keyword-spacing": ["warn", { "before": false, "after": false }],
+      // "space-in-parens": ["warn", "never"],
+      // "promise/always-return": "warn",
+      // "promise/no-return-wrap": "error",
+      // "promise/param-names": "error",
+      // "promise/catch-or-return": "error",
+      // "promise/no-new-statics": "error",
+      // "promise/no-return-in-finally": "error"
+      // Add more rules as needed
+    }
+  }
+];

package/index.js

@@ -0,0 +1,11 @@
+import createComponent from "./src/createComponent.js";
+import prepareBundle from "./src/makeResourcesImportable.js";
+
+export default {
+  generateModule: (_props) => {
+    return createComponent(_props);
+  },
+  bundleUp: (params) => {
+    return prepareBundle(params);
+  }
+};

package/makefile

@@ -0,0 +1,11 @@
+update-package:
+	git add . && git commit -m "Updates" && npm version patch && npm publish
+
+_update-package-no-commit:
+	git add . && npm version patch && npm publish
+
+patch_and_publish:
+	npm version patch && npm publish
+
+update-package-no-commit:
+	npm publish

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@alkimia/framework",
+  "version": "0.1.0",
+  "description": "Alkimia framework to build JavaScript modules ",
+  "main": "src/createComponent.js",
+  "type": "module",
+  "bin": {
+    "alkimia": "cli.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:intersides/alkimia-framework.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "cli": "node cli.js --srcDir=apptest --env=test --withPlayground=true"
+  },
+  "author": "InterSides",
+  "license": "ISC",
+  "dependencies": {
+    "@alkimia/lib": "^1.0.2",
+    "js-better-fs": "^1.0.0",
+    "node-localstorage": "^3.0.5",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@stylistic/eslint-plugin-js": "^2.11.0",
+    "chai": "^5.1.2",
+    "eslint": "^9.16.0",
+    "mocha": "^10.8.2",
+    "sass": "^1.74.1",
+    "vite": "^6.0.2"
+  }
+}

package/src/createComponent.js

@@ -0,0 +1,148 @@
+"use strict";
+import prompts from "prompts";
+import fs from "js-better-fs";
+import path from "path";
+import ModulesMaker from "./modulesMaker.js";
+
+const {
+  moduleMaker,
+  html,
+  scss,
+  playgroundHtml,
+  playgroundJS
+} = ModulesMaker;
+
+
+import { utilities } from "@alkimia/lib";
+
+export default function createComponent(_props){
+  const props = {
+    srcDir: "app",
+    env: "test",
+    withPlayground: false
+  };
+
+  utilities.transfer(_props, props);
+
+  return new Promise(async(resolve, reject) => {
+
+    const dirResponse = await prompts({
+      type: "text",
+      name: "dir",
+      message: "Directory ",
+      initial: props.srcDir || "src"
+    });
+
+    const modulePath = path.join(process.cwd(), `${dirResponse.dir}/`);
+
+    const nameResponse = await prompts({
+      type: "text",
+      name: "componentName",
+      message: "Name"
+    });
+
+    //cleanup the name
+    let componentName = "";
+    const nameParts = nameResponse["componentName"].trim().split(" ");
+    if(nameParts.length > 1){
+      nameParts.forEach(_part => {
+        _part = _part.trim();
+        if(_part.length > 0){
+          componentName += _part[0].toUpperCase() + _part.substring(1);
+        }
+      });
+    }
+    else{
+      componentName = nameResponse["componentName"][0].toUpperCase() + nameResponse["componentName"].substring(1);
+    }
+
+    console.log("component will be named as:", componentName);
+
+    const includeDom = await prompts({
+      type: "confirm",
+      name: "withDom",
+      message: "Needs a dom",
+      initial: false
+    });
+
+    const includePlayground = await prompts({
+      type: "confirm",
+      name: "withPlayground",
+      message: "Include playgorund",
+      initial: false
+    });
+
+    const includeStatesSample = await prompts({
+      type: "confirm",
+      name: "withStatesSample",
+      message: "Include States Sample",
+      initial: false
+    });
+
+    const assetsGenerator = moduleGenerator({
+      name: componentName,
+      withPlayground:includePlayground["withPlayground"] || false,
+      withDom: includeDom["withDom"] || false,
+      withStatesSample:includeStatesSample["withStatesSample"] || false
+    });
+   
+
+    await fs.writeFile(`${modulePath}${componentName}/${componentName}.js`, assetsGenerator.js);
+
+    let nodePackage = null;
+    if(includePlayground["withPlayground"]){
+      await fs.writeFile(`${modulePath}${componentName}/playground/index.js`, assetsGenerator.playgroundJS);
+      await fs.createDir(`${modulePath}${componentName}/playground`);
+      nodePackage = {
+        description: "generated support file",
+        scripts: {}
+      };
+    }
+
+    if(includeDom["withDom"]){
+      await fs.writeFile(`${modulePath}${componentName}/${componentName}.scss`, assetsGenerator.scss);
+      await fs.writeFile(`${modulePath}${componentName}/${componentName}.html`, assetsGenerator.html);
+      if(nodePackage){
+        await fs.writeFile(`${modulePath}${componentName}/playground/index.html`, assetsGenerator.playgroundHtml);
+        nodePackage.scripts[`playground-${componentName}`] = "vite";
+      }
+    }
+    else{
+      if(nodePackage){
+        nodePackage.scripts[`playground-${componentName}`] = "node ./index.js";
+      }
+    }
+    if(nodePackage){
+      nodePackage.scripts["test"] = "echo \"Error: no test specified\" && exit 1";
+      await fs.writeFile(`${modulePath}${componentName}/playground/package.json`, JSON.stringify(nodePackage, null, 4));
+    }
+
+    resolve(props);
+  });
+}
+
+function moduleGenerator(_params){
+
+
+  const params = utilities.transfer(_params, {
+    name: null,
+    withPlayground: true,
+    withDom: false,
+    withStatesSample: false
+  });
+
+  if(typeof params.name !== "string" || params.name === ""){
+    throw new Error("module name is required");
+  }
+
+  const moduleElementId = params.name.toLowerCase() + "-element";
+  const moduleName = params.name[0].toUpperCase() + params.name.substring(1);
+
+  return {
+    js: moduleMaker(moduleElementId, moduleName, params.withDom, params.withPlayground, params.withStatesSample),
+    scss: scss(moduleName),
+    html: html(moduleName, params.withStatesSample),
+    playgroundHtml: playgroundHtml(moduleName),
+    playgroundJS: playgroundJS(moduleName, params.withDom)
+  };
+}

package/src/makeResourcesImportable.js

@@ -0,0 +1,53 @@
+import fs from "fs";
+import path from "fs";
+import { utilities } from "@alkimia/lib";
+
+function *retrieveStylesAndTemplates(_path){
+  const result = fs.readdirSync(_path, {withFileTypes:true});
+  for (const _appDirEntry of result) {
+    if(_appDirEntry.isFile()){
+      const extension = path.parse(_appDirEntry.name).ext;
+      const isDesiredExtension = [".css", ".html", ".svg"].some(ext=>ext === extension);
+      if(isDesiredExtension){
+        const baseName = path.parse(_appDirEntry.name).name;
+        const isDesiredName = !["index", "colors", "common", "fonts", "_buttons", "_loaders", "_modals", "_icons"].some(name=>name === baseName);
+        if(isDesiredName){
+          yield path.join(_path, _appDirEntry.name);
+        }
+      }
+    }
+    else if(_appDirEntry.isDirectory()){
+      const isDesiredDirectory = !["playground", "test", "dist"].some(name=>name === _appDirEntry.name);
+      if(isDesiredDirectory){
+        yield *retrieveStylesAndTemplates(path.join(_path, _appDirEntry.name));
+      }
+    }
+
+  }
+}
+
+export default function prepareBundle(_params){
+  console.debug("_params:", _params);
+
+  const params = {
+    srcDir:"app",
+    env:"test"
+  };
+  utilities.transfer(_params, params);
+  console.log("running make bundle using parameters:", params);
+
+  for (const entry of retrieveStylesAndTemplates(`./${params.srcDir}`)) {
+    const fileContent = fs.readFileSync(entry, {encoding:"utf-8"});
+    if(process.env.BUILD_ENV === "test"){
+      fs.writeFileSync(entry+".mjs", `export default \`\n${fileContent}\`;`, {encoding:"utf-8"});
+    }
+    else{
+      // export default from "bundle-text:./AuthenticationWidget.css";
+      const parsedFileLocation = path.parse(entry);
+      const content = `import resourceAsString from "bundle-text:./${parsedFileLocation.base}";\n export default resourceAsString;`;
+      fs.writeFileSync(entry+".mjs", content, {encoding:"utf-8"});
+    }
+    console.debug(entry, entry+".mjs");
+  }
+
+}

package/src/modulesMaker.js

@@ -0,0 +1,215 @@
+export default {
+
+  moduleMaker: function(
+    _moduleId,
+    _moduleName,
+    withDomNode = false,
+    withPlayground = false,
+    withStatesSample = false
+  ) {
+
+    const importStyle = `./${_moduleName}.scss`;
+    let importHtm = `./${_moduleName}.html`;
+    importHtm = `${importHtm}`;
+
+    return `import { utilities, ElementState } from "@alkimia/lib";
+${withDomNode ? `
+import style from "${importStyle}?inline";
+import htmlTemplate from "${importHtm}?raw";${withStatesSample ? `
+` : ""} ` : ""
+}
+
+export default function ${_moduleName}(args){
+
+  const _params = utilities.transfer(args, {});
+    
+  const instance = Object.create(${_moduleName}.prototype);
+    ${
+  withDomNode
+    ? `
+  const _customElement = utilities.createAndRegisterWidgetElement("${_moduleName}");
+  instance.element = new _customElement(style, htmlTemplate);
+    
+  function _onAppended() {
+    console.log("_onAppended should be delegated");
+  }
+  ${ withStatesSample ? `
+  let [counter, setCounter] = [null, (_event) => {}];
+  let [list, setList] = [null, (_color) => {}];
+    
+  //children elements
+  let $input = null,
+      $counter = null,
+      $list = null,
+      $listItemTemplate = null;
+  ` : ""}
+  let _vParent = null;
+  ` : ""
+}
+  /**
+  *
+  * @return {${_moduleName}}
+  * @private
+  */
+  const _initialize = ()=>{
+    ${withDomNode ? "_initView();" : ""}
+    _registerEvents();
+    
+    return instance;
+  };
+  ${
+  withDomNode
+    ? `
+  function _initView(){
+    ${ withStatesSample ? `
+    $input = instance.element.view.querySelector("input");
+    $counter = instance.element.view.querySelector("#counter_value");
+    $list = instance.element.view.querySelector("ul");
+    $listItemTemplate = instance.element.view.querySelector(".list_item_template");
+      
+    [counter, setCounter] = new ElementState({
+      element: $counter,
+      attribute: ElementState.BindableAttribute.innertext.name,
+      initialValue: 0
+    });
+        
+    [list, setList] = new ElementState({
+      element: $list,
+      attribute: ElementState.BindableAttribute.children,
+      initialValue: [],
+      transformer: (list) => {
+        if (list) {
+          return list.map((_listItem) => {
+            const listItemTemplate = $listItemTemplate.cloneNode(true);
+            listItemTemplate.innerText = _listItem;
+            return listItemTemplate;
+          });
+        } 
+        else {
+          return [];
+        }
+      }
+    });
+    ` : ""}
+  }
+    
+  instance.isAttached = function(){
+    return instance.element.parentNode !== null;
+  };
+
+  /**
+   * @param {HTMLElement} _parent
+   */
+  instance.appendTo = (_parent)=>{
+    _parent.appendChild(instance.element);
+    _vParent = _parent;
+    _onAppended();
+  };` : ""
+}
+    
+  function _registerEvents(){
+    ${
+  withDomNode ? `_onAppended = () => {
+      ${ withStatesSample ? "$input.value = counter.value; //from initialValue" : "" }
+    };
+    ${ withStatesSample ? `
+    if($input){
+      $input.addEventListener("change", (evt) => {
+        setCounter(evt.target.value);
+        setList([...list.value, evt.target.value]);
+      });
+    }
+    ` : ""} `: ""}
+  }
+    
+  return _initialize();
+}
+
+/**
+ *
+ * @type {${_moduleName}}
+ * @private
+ */
+let _instance = null;
+
+${_moduleName}.getSingleton = function(_args=null) {
+  if(!_instance){
+    _instance = ${_moduleName}(_args);
+  }
+  return _instance;
+};
+
+${_moduleName}.getInstance = function(_args) {
+  return ${_moduleName}(_args);
+};
+`;
+  },
+  playgroundJS: function(moduleName, withDom = false) {
+    return `import ${moduleName} from "../${moduleName}.js";
+${
+  withDom
+    ? /*generate the module with a basic app container to attach to it*/
+    `const _vApp = document.createElement("app");
+document.body.appendChild(_vApp);\n
+let ${moduleName.toLowerCase()} = ${moduleName}.getInstance();
+${moduleName.toLowerCase()}.appendTo(_vApp);`
+    : /*without HTML view*/ `
+const ${moduleName.toLowerCase()}Instance = ${moduleName}.getInstance();
+console.debug("${moduleName.toLowerCase()}Instance :", ${moduleName.toLowerCase()}Instance);
+`
+}
+`;
+  },
+  playgroundHtml: function(widgetName) {
+    return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>${widgetName}</title>
+</head>
+<body>
+<script type="module" src="index.js"></script>
+</body>
+</html>
+`;
+  },
+  html:function(widgetName, withStatesSample){
+    let html = "";
+    if(withStatesSample){
+      html = `<section>
+	<label>
+		<span>my input</span>
+		<input type="number" id="counter_input" min="0" max="100" step="1" />
+	</label>
+</section>
+
+<section>
+	<p>counter <span id="counter_value">abc</span></p>
+
+	<div>
+		<label>
+			<span>counter list</span>
+		</label>
+		<ul>
+			<li class="list_item_template">0</li>
+		</ul>
+	</div>
+
+	<label>
+		<span>list</span>
+	</label>
+
+</section>`;
+    }
+    return html;
+
+  },
+  scss: function(widgetName) {
+    return `
+:host{}
+.${widgetName}{
+}
+`;
+  }
+};

package/src/vite.config.js

@@ -0,0 +1,21 @@
+const htmlImport = {
+    name: "htmlImport",
+    /**
+     * Checks to ensure that a html file is being imported.
+     * If it is then it alters the code being passed as being a string being exported by default.
+     * @param {string} code The file as a string.
+     * @param {string} id The absolute path.
+     * @returns {{code: string}}
+     */
+    transform(code, id) {
+        if (/^.*\.html$/g.test(id)) {
+            code = `export default \`${code}\``
+        }
+        return { code }
+    }
+};
+
+//NOTE: htmlImport does not work with builds.. ?raw it is used
+export default {
+    plugins: [ /*htmlImport*/ ]
+}