achilles 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 51e520740708516c772ee1471e90480e4d2b13de55f0615d92fb4627a594c017
+  data.tar.gz: 857aade6afdccdc0651764674c2771d1af60c93e449bb62293ce8caac9d33cd6
+SHA512:
+  metadata.gz: 0610ab82bfc5e28f191e14eaf0f780884ddd102963ff27003a106c8fb76564b8ca5aa4d5b6f4a43c20b3d8bc357897a05567cefb88c991e10c28f6d062dc27a3
+  data.tar.gz: 470dbfe1077dc3f10c9d57c8f2756cc597e795b098eb3adf67e01a18ce125441c8be05c071da9400d13a65ecd5c410e4f88c7cb22ac865f2829bc5d8be71e2f6

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2024 Jey Geethan
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,28 @@
+# Achilles
+Short description and motivation.
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem "achilles"
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install achilles
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,8 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"

data/app/assets/config/achilles_manifest.js

@@ -0,0 +1 @@
+//= link_directory ../stylesheets/achilles .css

data/app/assets/stylesheets/achilles/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/controllers/achilles/application_controller.rb

@@ -0,0 +1,4 @@
+module Achilles
+  class ApplicationController < ActionController::Base
+  end
+end

data/app/helpers/achilles/application_helper.rb

@@ -0,0 +1,4 @@
+module Achilles
+  module ApplicationHelper
+  end
+end

data/app/javascript/achilles/application/app_constants.js

@@ -0,0 +1,6 @@
+// Stores app level constants
+var AppConstants = {
+    PageComponentId: 'Page'
+}
+
+export { AppConstants }

data/app/javascript/achilles/application/application.js

@@ -0,0 +1,90 @@
+import { AppConstants } from "common/src/achilles/application/app_constants";
+import { ComponentsRegistry } from "common/src/achilles/components/components_registry";
+import { ComponentParser } from "common/src/achilles/components/component_parser";
+import { ComponentsClassMapper } from "common/src/achilles/components/components_class_mapper";
+import { Page } from "common/src/achilles/page/page";
+import { Timezone } from "common/src/achilles/application/timezone/timezone";
+import { Turbo } from "common/src/achilles/application/hooks-manager/turbo";
+import { Observer } from "common/src/achilles/application/dom-mutation-observer/observer";
+
+// Application class/obj to drive all things for the web app
+class Application {
+  _page;
+  _engine;
+  _componentRegistry;
+  _timezone;
+  _componentsClassMapper;
+  _hooksManager;
+  _domMutationObserver;
+
+  constructor() {
+    // Set the application while creating the object
+    this._page = new Page(AppConstants.PageComponentId, null);
+    this._componentRegistry = new ComponentsRegistry();
+    this._componentsClassMapper = new ComponentsClassMapper();
+    this._timezone = new Timezone();
+    this._domMutationObserver = new Observer(this.setup.bind(this));
+
+    // Register the first-level special component: Page
+    this.componentRegistry.registerComponentByObj(this._page);
+
+    // Hook into the window events
+    this._hooksManager = new Turbo(this, this.setup.bind(this), this.teardown.bind(this));
+  }
+
+  // Getters
+  get componentsClassMapper() {
+    return this._componentsClassMapper;
+  }
+
+  get timezone() {
+    return this._timezone;
+  }
+
+  get componentRegistry() {
+    return this._componentRegistry;
+  }
+
+  get engine() {
+    return this._engine;
+  }
+
+  get page() {
+    return this._page;
+  }
+
+  // Setters
+  set engine(engine) {
+    this._engine = engine;
+  }
+
+  setup() {
+    this._domMutationObserver.stop();
+    this.parseHtmlAndRegisterComponents();
+    this.componentRegistry.callSetupForComponent(AppConstants.PageComponentId);
+    this._domMutationObserver.start();
+  }
+
+  teardown() {
+    this._domMutationObserver.stop();
+    // Call Page and its subcomponents beforeRenders
+    this.componentRegistry.callTeardownForComponent(AppConstants.PageComponentId);
+    // Remove/deregister all components from page except Page
+    this.deregisterAllComponentsExceptPage();
+    this._domMutationObserver.start();
+  }
+
+  parseHtmlAndRegisterComponents() {
+    const componentParser = new ComponentParser(this._componentRegistry, this._componentsClassMapper);
+    componentParser.parse();
+  }
+
+  deregisterAllComponentsExceptPage() {
+    let pageComponent = this.componentRegistry.getRegisteredComponent(AppConstants.PageComponentId)
+    pageComponent.subComponents.forEach((subComponentId) => {
+      this.componentRegistry.deregisterComponent(subComponentId);
+    })
+  }
+}
+
+export { Application };

data/app/javascript/achilles/application/dom-mutation-observer/observer.js

@@ -0,0 +1,28 @@
+class Observer {
+  _mutationObserver;
+  _callback;
+
+  constructor(callback) {
+    this._callback = callback;
+    this._mutationObserver = new MutationObserver(this.domChangedCallback.bind(this));
+  }
+
+  config() {
+    return { attributes: false, childList: true, subtree: true };
+  }
+
+  start() {
+    // Listen on html instead of body since turbo replaces body and the observer stops after one page transition
+    this._mutationObserver.observe($('html')[0], this.config());
+  }
+
+  stop() {
+    this._mutationObserver.disconnect();
+  }
+
+  domChangedCallback(mutationsList, observer) {
+    this._callback();
+  }
+}
+
+export { Observer }

data/app/javascript/achilles/application/hooks-manager/turbo.js

@@ -0,0 +1,35 @@
+class Turbo {
+  _application;
+  _setupCallback;
+  _teardownCallback;
+
+  constructor(application, setupCallback, teardownCallback) {
+    this._application = application;
+    this._setupCallback = setupCallback;
+    this._teardownCallback = teardownCallback;
+
+    this.setupEvents();
+  }
+
+  // Setups relevant hooks to the page for component lifecycles. This depends on the framework being used.
+  // Here we are using turbo drive, so hooking into that.
+  setupEvents() {
+    // Events registering
+    // Turbolinks lifecycle ref: https://sevos.io/2017/02/27/turbolinks-lifecycle-explained.html
+    // Render is not called on initial page load. So execute only once during page load
+    $(document).one("turbo:load", () => {
+      this._setupCallback();
+    });
+
+    // Render is called before each page transition. But its not called on initial page load. That's why we need 'load'
+    $(document).on("turbo:render", () => {
+      this._setupCallback();
+    });
+
+    $(document).on("turbo:before-render", () => {
+      this._teardownCallback();
+    });
+  }
+}
+
+export { Turbo }

data/app/javascript/achilles/application/timezone/timezone.js

@@ -0,0 +1,18 @@
+class Timezone {
+  _timezoneString;
+
+  constructor() {
+    this.getTimezoneFromHtml();
+  }
+
+  // Getters
+  get timezoneString() {
+    return this._timezoneString;
+  }
+
+  getTimezoneFromHtml() {
+    this._timezoneString = $("div[data-app-timezone]").data("app-timezone") || "Etc/UTC";
+  }
+}
+
+export { Timezone }

data/app/javascript/achilles/components/component_base.js

@@ -0,0 +1,29 @@
+class ComponentBase {
+    parentComponentId;
+    id;
+    defaultParams;
+    setupExecuted = false;
+    teardownExecuted = false;
+
+    constructor(id, parentComponentId = 'Page', defaultParams = []) {
+        this.id = id;
+        this.parentComponentId = parentComponentId;
+        this.defaultParams = defaultParams;
+
+        if(typeof id === 'undefined')
+            throw('id cannot be undefined');
+    }
+
+    setup() {}
+    teardown() {}
+
+    rootElement() {
+        return $(this.rootElementSelector());
+    }
+
+    rootElementSelector() {
+        return `#${this.id}`;
+    }
+}
+
+export { ComponentBase }

data/app/javascript/achilles/components/component_parser.js

@@ -0,0 +1,36 @@
+import { AppConstants } from "common/src/achilles/application/app_constants";
+
+// Parse the entire html dom and register components if not already registered
+class ComponentParser {
+    constructor(componentRegistry, componentsClassMapper) {
+        this._componentRegistry = componentRegistry;
+        this._componentsClassMapper = componentsClassMapper;
+    }
+
+    parse() {
+        [...$('*[data-component-class]')].forEach((elem) => {
+            let klassName = $(elem).data('component-class');
+            if(klassName.trim() === '') { return; }
+
+            let klass = this._componentsClassMapper.getComponentClass(klassName);
+            if(typeof klass === 'undefined' || klass === null) {
+                console.error(`Component class not found: ${klassName} | Element:`);
+                console.error($(elem));
+                return;
+            }
+            if($(elem).data('component-registered') === true) {
+                return;
+            }
+            try {
+                let obj = new klass($(elem).attr('id'), AppConstants.PageComponentId)
+                this._componentRegistry.registerComponentByObj(obj);
+            } catch (e) {
+                console.error(`Error parsing component. className: ${klassName} | Element ID: ${$(elem).attr('id')}`);
+                console.error($(elem));
+                console.error(e);
+            }
+        })
+    }
+}
+
+export { ComponentParser };

data/app/javascript/achilles/components/components_class_mapper.js

@@ -0,0 +1,14 @@
+// Single Responsibility: Contains the list of all view components so it can be instantiated
+class ComponentsClassMapper {
+    _componentsClassMapper = {};
+
+    addComponentClass(key, klass) {
+        this._componentsClassMapper[key] = klass;
+    }
+
+    getComponentClass(key) {
+        return (this._componentsClassMapper[key] || null);
+    }
+}
+
+export { ComponentsClassMapper }

data/app/javascript/achilles/components/components_registry.js

@@ -0,0 +1,111 @@
+import { AppConstants } from "common/src/achilles/application/app_constants";
+
+// Contains all the registered components in a page at the current moment
+class ComponentsRegistry {
+    _registeredComponents = {};
+
+    registerComponentByObj(obj) {
+        this.registerComponent(obj.id, obj, obj.defaultParams, obj.parentComponentId);
+    }
+
+    registerComponent(id, obj, defaultParams, parentComponentId) {
+        if($(`[id=${id}]`).length > 1) {
+            console.error(`Error while registering component: There are more than one elements with the same id: ${id}. Skipping registering component`);
+            return;
+        }
+        if(this._registeredComponents[id]) {
+            // Component is already registered. So have to call deregister and teardown
+            this.teardownAndDeregister(id);
+        }
+
+        this._registeredComponents[id] = {
+            id: id,
+            obj: obj,
+            defaultParams: defaultParams,
+            parentComponentId: parentComponentId,
+            subComponents: []
+        };
+        if(parentComponentId != null) {
+            let parentComponent = this.getRegisteredComponent(parentComponentId);
+            parentComponent.subComponents.push(id);
+        }
+        $(`#${id}`).attr('data-component-registered', 'true');
+    }
+
+    deregisterComponent(id) {
+        let component = this._registeredComponents[id];
+        if(!component)
+            return;
+
+        let parentComponent = this.getRegisteredComponent(component.parentComponentId);
+
+        if(parentComponent != null){
+            parentComponent.subComponents = parentComponent.subComponents.filter(item => item !== id);
+        }
+
+        this._registeredComponents[id] = null;
+        $(`#${id}`).removeAttr('data-component-registered');
+    }
+
+    getRegisteredComponent(id) {
+        return this._registeredComponents[id];
+    }
+
+    callSetupForComponent(id) {
+        let component = this.getRegisteredComponent(id);
+        if(!component || !component.obj)
+            return;
+        if(id !== AppConstants.PageComponentId && $('#' + id).length === 0) {
+            this.elementNotFound(id);
+            return;
+        }
+
+        // Call the objs default setup if its not executed already, if not skip to their children
+        if(component.obj.setup && component.obj.setupExecuted === false) {
+            try{
+                component.obj.setup(...component.defaultParams);
+                component.obj.setupExecuted = true;
+            } catch(e) {
+                console.error(e);
+            }
+        }
+
+        // Call setup for all subcomponents
+        component.subComponents.forEach((subComponentId) => {
+            this.callSetupForComponent(subComponentId);
+        });
+    }
+
+    callTeardownForComponent(id) {
+        let component = this.getRegisteredComponent(id);
+        if(!component || !component.obj)
+            return;
+
+        // Call the objs default teardown if not already executed, otherwise skip to its children
+        if(component.obj.teardown && component.obj.teardownExecuted === false) {
+            try{
+                component.obj.teardown(...component.defaultParams);
+                component.obj.teardownExecuted = true;
+            } catch(e) {
+                console.error(e);
+            }
+        }
+
+        // Call teardown for all sub view_components
+        component.subComponents.forEach((subComponentId) => {
+            this.callTeardownForComponent(subComponentId);
+        });
+    }
+
+    teardownAndDeregister(id) {
+        this.callTeardownForComponent(id);
+        this.deregisterComponent(id);
+    }
+
+    elementNotFound(id) {
+        console.error('Cannot find element while setup, so teardown & deregister. id: ' + id);
+        this.teardownAndDeregister(id);
+    }
+}
+
+export { ComponentsRegistry }

data/app/javascript/achilles/page/page.js

@@ -0,0 +1,5 @@
+import { ComponentBase } from "common/src/achilles/components/component_base";
+
+class Page extends ComponentBase {}
+
+export { Page }

data/app/jobs/achilles/application_job.rb

@@ -0,0 +1,4 @@
+module Achilles
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/achilles/application_mailer.rb

@@ -0,0 +1,6 @@
+module Achilles
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/models/achilles/application_record.rb

@@ -0,0 +1,5 @@
+module Achilles
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/views/layouts/achilles/application.html.erb

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Achilles</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= stylesheet_link_tag    "achilles/application", media: "all" %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/config/importmap.rb

@@ -0,0 +1,3 @@
+# Pin npm packages by running ./bin/importmap
+
+pin_all_from File.expand_path("../app/javascript", __dir__)

data/config/routes.rb

@@ -0,0 +1,2 @@
+Achilles::Engine.routes.draw do
+end

data/lib/achilles/engine.rb

@@ -0,0 +1,16 @@
+module Achilles
+  class Engine < ::Rails::Engine
+    isolate_namespace Achilles
+
+    # Importmap initializers
+    initializer 'achilles.importmap', before: 'importmap' do |app|
+      app.config.importmap.paths << Engine.root.join('config/importmap.rb')
+      app.config.importmap.cache_sweepers << Engine.root.join('app/javascript') # Required to ensure that js reloads
+    end
+
+    # Add javascript to precompile paths
+    initializer 'achilles.precompile' do |app|
+      app.config.assets.paths << Engine.root.join('app/javascript')
+    end
+  end
+end

data/lib/achilles/version.rb

@@ -0,0 +1,3 @@
+module Achilles
+  VERSION = "0.1.0"
+end

data/lib/achilles.rb

@@ -0,0 +1,6 @@
+require "achilles/version"
+require "achilles/engine"
+
+module Achilles
+  # Your code goes here...
+end

data/lib/tasks/achilles_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :achilles do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,88 @@
+--- !ruby/object:Gem::Specification
+name: achilles
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Jey Geethan
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2024-06-16 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.2.3
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.2.3
+description: A simple js library to make your turbo apps work better
+email:
+- jey@jeygeethan.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/achilles_manifest.js
+- app/assets/stylesheets/achilles/application.css
+- app/controllers/achilles/application_controller.rb
+- app/helpers/achilles/application_helper.rb
+- app/javascript/achilles/application/app_constants.js
+- app/javascript/achilles/application/application.js
+- app/javascript/achilles/application/dom-mutation-observer/observer.js
+- app/javascript/achilles/application/hooks-manager/turbo.js
+- app/javascript/achilles/application/timezone/timezone.js
+- app/javascript/achilles/components/component_base.js
+- app/javascript/achilles/components/component_parser.js
+- app/javascript/achilles/components/components_class_mapper.js
+- app/javascript/achilles/components/components_registry.js
+- app/javascript/achilles/page/page.js
+- app/jobs/achilles/application_job.rb
+- app/mailers/achilles/application_mailer.rb
+- app/models/achilles/application_record.rb
+- app/views/layouts/achilles/application.html.erb
+- config/importmap.rb
+- config/routes.rb
+- lib/achilles.rb
+- lib/achilles/engine.rb
+- lib/achilles/version.rb
+- lib/tasks/achilles_tasks.rake
+homepage: https://github.com/RocketApex/achilles
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+  homepage_uri: https://github.com/RocketApex/achilles
+  source_code_uri: https://github.com/RocketApex/achilles
+  changelog_uri: https://github.com/RocketApex/achilles
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.2.3
+signing_key:
+specification_version: 4
+summary: Js library as an alternative to stimulus
+test_files: []