@alkimia/framework 0.1.0

package/README.md

@@ -0,0 +1,95 @@
+
+# Alkimia Framework CLI
+
+## Overview
+
+The **Alkimia Framework CLI** is a command-line tool designed to enhance the development experience within the Alkimia framework. Alkimia is a JavaScript framework that strives to minimize abstraction, encouraging developers to work directly with JavaScript and the HTML DOM. Unlike frameworks such as React, Alkimia emphasizes simplicity and direct manipulation of the DOM, making it easier to build dynamic web applications without the overhead of heavy abstractions.
+
+### Key Principles
+
+- **Direct JavaScript Usage**: By advocating the closest usage of JavaScript, Alkimia minimizes syntactic sugar, such as classical object creation. This approach enhances transparency and simplicity in code.
+- **Function Factory Approach**: The CLI generates modules that use the function factory pattern to expose public methods while keeping properties and methods private.
+- **Singleton and Instance Constructors**: Each module provides both a singleton and an instance constructor, offering flexibility in managing unique and multiple instances as needed.
+- **Encouraged Verbosity**: To further reduce abstractions, the framework encourages verbosity. This ensures that the code remains clear and understandable, even for complex applications.
+- **View Module Creation**: The CLI offers the option to create modules that require a view. In such cases, HTML and SCSS placeholder files are added automatically. Additionally, a playground folder is included in each module, providing an introduction to the component's usage, including data binding.
+
+### Features
+
+- **Component Creation**: Effortlessly generate new components with predefined structures tailored to your project.
+- **State Management**: Seamlessly integrate state management using Alkimia's built-in utilities.
+- **Resource Management**: Efficiently import and manage various resources with ease.
+## Features
+
+- **Component Creation**: Easily generate new components with predefined structures.
+- **State Management**: Utilize built-in state management utilities.
+- **Resource Management**: Import and manage various resources with ease.
+- **View Module Creation**: Create modules that require a view, including automatic generation of HTML and SCSS placeholder files and a playground folder for component usage and data binding.
+
+## Directory Structure
+
+```
+alkimia-framework-cli/
+├── apptest/
+│   └── InputElement/
+│       ├── InputElement.js
+│       ├── InputElement.html
+│       ├── InputElement.scss
+│       └── playground/
+│           ├── index.mjs
+│           └── package.json
+├── src/
+│   ├── createComponent.js
+│   ├── libs/
+│       └── StatesFactory.js
+│   └── makeResourcesImportable.js
+├── cli.js
+├── index.mjs
+└── README.md
+```
+
+## Installation
+
+To install the Alkimia Framework CLI, you need to have Node.js and npm installed on your machine. Then, run the following command:
+
+```bash
+npm install -g alkimia-framework-cli
+```
+
+## Usage
+
+Usage instructions for the CLI tool go here. For example:
+
+### Creating a New Component
+
+To create a new component, run:
+
+```bash
+alkimia create-component <component-name>
+```
+
+### Managing States
+
+Documentation for managing states using the `StatesFactory` utility.
+
+### Importing Resources
+
+Instructions for using the `makeResourcesImportable` function to manage your resources efficiently.
+
+## Contributing
+
+If you wish to contribute to the Alkimia Framework CLI, please follow the guidelines below:
+
+1. Fork the repository.
+2. Create a new branch for your feature or bug fix.
+3. Make your changes and commit them with descriptive messages.
+4. Push your changes to your fork.
+5. Create a pull request.
+
+## Authors
+
+- [InterSides (Marco Falsitta)](https://github.com/intersides) - *Initial work*
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+

package/bb/SomeExample/SomeExample.css

@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=SomeExample.css.map */

package/bb/SomeExample/SomeExample.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"SomeExample.css"}

package/bb/SomeExample/SomeExample.html

@@ -0,0 +1,28 @@
+<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>
+			<template id="list_item_template">
+				<li class="list-item">0</li>
+			</template>
+			<li class="list-item">1</li>
+		</ul>
+	</div>
+
+	<label>
+		<span>list</span>
+	</label>
+
+</section>

package/bb/SomeExample/SomeExample.js

@@ -0,0 +1,132 @@
+import style from "./SomeExample.scss?inline";
+import htmlTemplate from "./SomeExample.html?raw";
+import {utilities, ElementState} from "@alkimia/lib";
+
+export default function SomeExample(args) {
+  const _params = utilities.transfer(args, {});
+
+  const instance = Object.create(SomeExample.prototype);
+
+  const _customElement = utilities.createAndRegisterWidgetElement("SomeExample");
+  instance.element = new _customElement(style, htmlTemplate);
+
+  function _onAppended() {
+    console.log("_onAppended should be delegated");
+  }
+
+  let [color, setColor] = [null, (_event) => {}];
+  let [counter, setCounter] = [null, (_event) => {}];
+  let [list, setList] = [null, (_color) => {}];
+
+  let _vParent = null;
+
+  //children elements
+  let $input = null,
+      $counter = null,
+      $list = null,
+      $listItemTemplate = null;
+
+  /**
+   *
+   * @return {SomeExample}
+   * @private
+   */
+  const _initialize = () => {
+    _initView();
+    _registerEvents();
+
+    return instance;
+  };
+
+  function _initView() {
+    $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
+    });
+
+    [color, setColor] = new ElementState({
+      element: $counter,
+      attribute: ElementState.BindableAttribute["style.color"],
+      initialValue: "blue"
+    });
+
+    [list, setList] = new ElementState({
+      element: $list,
+      attribute: ElementState.BindableAttribute.children,
+      initialValue: [],
+      transformer: (list) => {
+        if (list) {
+          return list.map((_listItem) => {
+            const listItemTemplate = $listItemTemplate.content.cloneNode(true);
+            const li = listItemTemplate.querySelector("li");
+            li.innerText = _listItem;
+            return li;
+          });
+        }
+        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() {
+    _onAppended = (_parent) => {
+      $input.value = counter.value; //from initialValue
+    };
+
+    if ($input) {
+      $input.addEventListener("change", (evt) => {
+        setCounter(evt.target.value);
+        if (evt.target.value === "1") {
+          setColor("green");
+        }
+        if (evt.target.value === "0") {
+          setColor("red");
+        }
+        setList([...list.value, evt.target.value]);
+      });
+    }
+  }
+
+  return _initialize();
+}
+
+/**
+ *
+ * @type {SomeExample}
+ * @private
+ */
+let _instance = null;
+
+SomeExample.getSingleton = function(_args = null) {
+  if (!_instance) {
+    _instance = SomeExample(_args);
+  }
+  return _instance;
+};
+
+SomeExample.getInstance = function(_args) {
+  return SomeExample(_args);
+};

package/bb/SomeExample/SomeExample.scss

@@ -0,0 +1,4 @@
+
+:host{}
+.SomeExample{
+}

package/bb/SomeExample/playground/index.html

@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>SomeExample</title>
+</head>
+<body>
+<script type="module" src="index.mjs"></script>
+</body>
+</html>

package/bb/SomeExample/playground/index.mjs

@@ -0,0 +1,6 @@
+import SomeExample from "../SomeExample.js";
+const _vApp = document.createElement("app");
+document.body.appendChild(_vApp);
+
+let someexample = SomeExample.getInstance();
+someexample.appendTo(_vApp);

package/bb/SomeExample/playground/node_modules/.package-lock.json

@@ -0,0 +1,34 @@
+{
+    "name": "playground",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "../../..": {
+            "name": "@intersides/alkimia-framework",
+            "version": "0.1.37",
+            "license": "ISC",
+            "dependencies": {
+                "@alkimia/utilities": "^1.1.0",
+                "js-better-fs": "^1.0.0",
+                "node-localstorage": "^3.0.5",
+                "prompts": "^2.4.2"
+            },
+            "bin": {
+                "alkimia": "cli.js"
+            },
+            "devDependencies": {
+                "chai": "^5.1.2",
+                "mocha": "^10.8.2",
+                "sass": "^1.74.1",
+                "vite": "^3.2.5"
+            }
+        },
+        "../../../index.js": {
+            "extraneous": true
+        },
+        "node_modules/@intersides/alkimia-framework": {
+            "resolved": "../../..",
+            "link": true
+        }
+    }
+}

package/bb/SomeExample/playground/node_modules/.vite/deps/@alkimia_utilities.js

@@ -0,0 +1,19 @@
+import {
+  ElementState,
+  StorageState,
+  Utilities_default
+} from "./chunk-S3CCDWQM.js";
+import "./chunk-RSJERJUL.js";
+
+// ../../../node_modules/@alkimia/utilities/index.mjs
+var utilities_default = {
+  Utilities: Utilities_default,
+  StateFactory: {
+    ElementState,
+    StorageState
+  }
+};
+export {
+  utilities_default as default
+};
+//# sourceMappingURL=@alkimia_utilities.js.map

package/bb/SomeExample/playground/node_modules/.vite/deps/@alkimia_utilities.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../node_modules/@alkimia/utilities/index.mjs"],
+  "sourcesContent": ["import Utilities from \"./src/Utilities.js\";\nimport { ElementState, StorageState} from \"./src/StatesFactory.js\";\n\nexport default {\n  Utilities:Utilities,\n  StateFactory:{\n    ElementState,\n    StorageState\n  }\n};\n"],
+  "mappings": ";;;;;;;;AAGA,IAAO,oBAAQ;AAAA,EACb,WAAU;AAAA,EACV,cAAa;AAAA,IACX;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/bb/SomeExample/playground/node_modules/.vite/deps/@alkimia_utilities_src_StatesFactory.js

@@ -0,0 +1,10 @@
+import {
+  ElementState,
+  StorageState
+} from "./chunk-S3CCDWQM.js";
+import "./chunk-RSJERJUL.js";
+export {
+  ElementState,
+  StorageState
+};
+//# sourceMappingURL=@alkimia_utilities_src_StatesFactory.js.map

package/bb/SomeExample/playground/node_modules/.vite/deps/@alkimia_utilities_src_StatesFactory.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/bb/SomeExample/playground/node_modules/.vite/deps/_metadata.json

@@ -0,0 +1,29 @@
+{
+  "hash": "c0f781e3",
+  "browserHash": "7c3585e1",
+  "optimized": {
+    "@alkimia/utilities": {
+      "src": "../../../../../../node_modules/@alkimia/utilities/index.mjs",
+      "file": "@alkimia_utilities.js",
+      "fileHash": "084e80c7",
+      "needsInterop": false
+    },
+    "@alkimia/utilities/src/StatesFactory": {
+      "src": "../../../../../../node_modules/@alkimia/utilities/src/StatesFactory.js",
+      "file": "@alkimia_utilities_src_StatesFactory.js",
+      "fileHash": "8de46a41",
+      "needsInterop": false
+    }
+  },
+  "chunks": {
+    "chunk-S3CCDWQM": {
+      "file": "chunk-S3CCDWQM.js"
+    },
+    "url-KRKZ4MEK": {
+      "file": "url-KRKZ4MEK.js"
+    },
+    "chunk-RSJERJUL": {
+      "file": "chunk-RSJERJUL.js"
+    }
+  }
+}

package/bb/SomeExample/playground/node_modules/.vite/deps/chunk-RSJERJUL.js

@@ -0,0 +1,9 @@
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+
+export {
+  __commonJS
+};
+//# sourceMappingURL=chunk-RSJERJUL.js.map

package/bb/SomeExample/playground/node_modules/.vite/deps/chunk-RSJERJUL.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}