@alkimia/framework 0.1.2 → 0.1.4

package/README.md

@@ -1,9 +1,9 @@
 
-# Alkimia Framework CLI
+# Alkimia Framework
 
 ## 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.
+The Alkimia Framework (version 0.1.2) 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. It includes a CLI tool to scaffold components interactively.
 
 ### Key Principles
 
@@ -13,11 +13,6 @@ The **Alkimia Framework CLI** is a command-line tool designed to enhance the dev
 - **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.
@@ -28,52 +23,46 @@ The **Alkimia Framework CLI** is a command-line tool designed to enhance the dev
 ## Directory Structure
 
 ```
-alkimia-framework-cli/
-├── apptest/
-│   └── InputElement/
-│       ├── InputElement.js
-│       ├── InputElement.html
-│       ├── InputElement.scss
-│       └── playground/
-│           ├── index.mjs
-│           └── package.json
+@alkimia/framework/
+├── cli.js                    # CLI entry point
+├── index.js                  # Main exports
 ├── src/
-│   ├── createComponent.js
-│   ├── libs/
-│       └── StatesFactory.js
-│   └── makeResourcesImportable.js
-├── cli.js
-├── index.mjs
+│   ├── createComponent.js    # Component generator logic
+│   ├── modulesMaker.js       # Module templates
+│   ├── makeResourcesImportable.js  # Resource bundling
+│   └── vite.config.js        # Build config
+├── components/               # Example generated components
+│   └── LoginWith2fa/
+├── sample/                   # Sample projects
+├── package.json
+├── eslint.config.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:
+To install the Alkimia Framework, you need to have Node.js and npm installed on your machine. Then, run the following command:
 
 ```bash
-npm install -g alkimia-framework-cli
+npm install -g @alkimia/framework
 ```
 
 ## Usage
 
-Usage instructions for the CLI tool go here. For example:
-
-### Creating a New Component
-
-To create a new component, run:
+The Alkimia Framework includes a CLI tool for scaffolding components. After installation, run the CLI interactively:
 
 ```bash
-alkimia create-component <component-name>
+alkimia
 ```
 
-### Managing States
-
-Documentation for managing states using the `StatesFactory` utility.
+You'll be prompted for:
+- Directory (e.g., `src`)
+- Component name
+- Options (e.g., include DOM, playground, states sample)
 
-### Importing Resources
+This generates a new component module in the specified directory with optional HTML, SCSS, and playground files.
 
-Instructions for using the `makeResourcesImportable` function to manage your resources efficiently.
+For more details on state management or resource importing, see the generated component examples in the `components/` directory or the @alkimia/lib documentation.
 
 ## Contributing
 
@@ -91,5 +80,5 @@ If you wish to contribute to the Alkimia Framework CLI, please follow the guidel
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+This project is licensed under the ISC License - see the [LICENSE](LICENSE) file for details.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alkimia/framework",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Alkimia framework to build JavaScript modules ",
   "main": "src/createComponent.js",
   "type": "module",

package/services/IconService/IconService.js

@@ -0,0 +1,76 @@
+import { utilities, ElementState } from "@alkimia/lib";
+
+import style from "./IconService.scss?inline";
+import htmlTemplate from "./IconService.html?raw"; 
+
+export default function IconService(args){
+
+  const _params = utilities.transfer(args, {});
+    
+  const instance = Object.create(IconService.prototype);
+    
+  const _customElement = utilities.createAndRegisterWidgetElement("IconService");
+  instance.element = new _customElement(style, htmlTemplate);
+    
+  function _onAppended() {
+    console.log("_onAppended should be delegated");
+  }
+  
+  let _vParent = null;
+  
+  /**
+  *
+  * @return {IconService}
+  * @private
+  */
+  const _initialize = ()=>{
+    _initView();
+    _registerEvents();
+    
+    return instance;
+  };
+  
+  function _initView(){
+    
+  }
+    
+  instance.isAttached = function(){
+    return instance.element.parentNode !== null;
+  };
+
+  /**
+   * @param {HTMLElement} _parent
+   */
+  instance.appendTo = (_parent)=>{
+    _parent.appendChild(instance.element);
+    _vParent = _parent;
+    _onAppended();
+  };
+    
+  function _registerEvents(){
+    _onAppended = () => {
+      
+    };
+     
+  }
+    
+  return _initialize();
+}
+
+/**
+ *
+ * @type {IconService}
+ * @private
+ */
+let _instance = null;
+
+IconService.getSingleton = function(_args=null) {
+  if(!_instance){
+    _instance = IconService(_args);
+  }
+  return _instance;
+};
+
+IconService.getInstance = function(_args) {
+  return IconService(_args);
+};

package/services/IconService/IconService.scss

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

package/services/IconService/playground/index.html

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

package/services/IconService/playground/index.js

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

package/services/IconService/playground/package.json

@@ -0,0 +1,7 @@
+{
+    "description": "generated support file",
+    "scripts": {
+        "playground-IconService": "vite",
+        "test": "echo \"Error: no test specified\" && exit 1"
+    }
+}

package/src/modulesMaker.js

@@ -145,17 +145,19 @@ ${_moduleName}.getInstance = function(_args) {
 `;
   },
   playgroundJS: function(moduleName, withDom = false) {
+    const lowerCaseModuleName = moduleName[0].toLowerCase() + moduleName.slice(1);
+
     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);`
+let ${lowerCaseModuleName} = ${moduleName}.getInstance();
+${lowerCaseModuleName}.appendTo(_vApp);`
     : /*without HTML view*/ `
-const ${moduleName.toLowerCase()}Instance = ${moduleName}.getInstance();
-console.debug("${moduleName.toLowerCase()}Instance :", ${moduleName.toLowerCase()}Instance);
+const ${lowerCaseModuleName} = ${moduleName}.getInstance();
+console.debug("${lowerCaseModuleName} :", ${lowerCaseModuleName});
 `
 }
 `;