{"id":24432384,"url":"https://github.com/kitsunetech-com/framejs","last_synced_at":"2026-04-22T23:31:32.319Z","repository":{"id":116484375,"uuid":"539109836","full_name":"KitsuneTech-com/FrameJS","owner":"KitsuneTech-com","description":"ES6 custom-element-based SPA framework","archived":false,"fork":false,"pushed_at":"2022-12-29T15:17:25.000Z","size":30,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-01-20T16:01:49.489Z","etag":null,"topics":["custom-elements","es6-javascript","spa"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KitsuneTech-com.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-20T17:23:23.000Z","updated_at":"2022-09-26T15:21:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"db0852ba-4f05-4001-99d9-d9f3c0c306eb","html_url":"https://github.com/KitsuneTech-com/FrameJS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KitsuneTech-com%2FFrameJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KitsuneTech-com%2FFrameJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KitsuneTech-com%2FFrameJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KitsuneTech-com%2FFrameJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KitsuneTech-com","download_url":"https://codeload.github.com/KitsuneTech-com/FrameJS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243475330,"owners_count":20296714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-elements","es6-javascript","spa"],"created_at":"2025-01-20T16:00:17.961Z","updated_at":"2025-12-30T00:11:48.598Z","avatar_url":"https://github.com/KitsuneTech-com.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FrameJS\n## ES6 custom-element-based SPA framework\n\n## Version: 2.0 (alpha) _Testing only - not suitable for production use_\n\n### Overview\n\nFrameJS is a single-page-application framework based on ES6 classes and custom elements. It's designed to allow an\napplication to be split into multiple modules, each of which can be loaded on demand. Custom elements are used to\nisolate the code and style in each module within a shadow DOM while still allowing the module to interact with the\nrest of the application as needed.\n\nEach element is represented by two classes: a controller class and its corresponding custom element. The application\ncan be defined either by instantiating the controller classes directly or by using the custom elements. The\ncontroller classes are responsible for managing the state of the application and the custom elements are responsible\nfor rendering the application. The controller classes are also responsible for loading the custom elements that\nthey need.\n\n#### Custom Elements\n\nIf defining the application using the custom elements, the application is defined by creating a `\u003cfjs-app\u003e` element\nfor the application, with a name attribute specified to identify the application. The configuration of the application\nis specified by creating a `\u003cfjs-config\u003e` element as a child of the `\u003cfjs-app\u003e` element. Within this element, configuration\ndetails can either be provided through `\u003cfjs-property\u003e` elements representing named directives or by specifying the same\ndirectives in an external JSON file and referencing this file in the src attribute of a `\u003cfjs-configfile\u003e` element. The\n`\u003cfjs-property\u003e` elements can be used to override the values specified in the external configuration file.\n\nThe `\u003cfjs-app\u003e` element can also contain a `\u003cfjs-frame\u003e` element in which the application's content frame can be defined.\nThis content frame will remain on-screen while the application is running, and all pages will be loaded within a\n`\u003cfjs-page\u003e` element within this frame. Transitions can be effected by using three `\u003cfjs-page\u003e` elements, each with a\nunary attribute specifying the transition phase: \"previous\", \"main\", or \"next\". If such elements are specified, the\n`\u003cfjs-page main\u003e` will be used to display the currently active content, while `\u003cfjs-page previous\u003e` and `\u003cfjs-page next\u003e`\nwill be used to display the content that is being transitioned away from and transitioned to, respectively. The attributes\nwill be modified as the transition progresses; when all content for the `\u003cfjs-page next\u003e` element has been loaded, its\nattribute will be changed to \"main\" and the `\u003cfjs-page main\u003e` element will be changed to \"previous\". Finally, the\n`\u003cfjs-page previous\u003e` element will be removed from the DOM, and a new `\u003cfjs-page next\u003e` element will be created for the\nnext transition. FrameJS will force a reflow of the page when the attributes are changed so that any defined CSS\ntransitions based on these attributes will be triggered. Backward navigation swaps the roles of the \"previous\" and \"next\"\npages to invert the transition direction.\n\nIn addition to `\u003cfjs-page\u003e` elements, the `\u003cfjs-frame\u003e` element can also contain `\u003cfjs-module\u003e` elements, which are self-contained\nelements that can be loaded/unloaded outside the typical navigation flow. `\u003cfjs-module\u003e` elements can be used to define\ndialogs, popups, or scripts that can either be loaded at startup or on demand, depending on when they are attached to\nthe DOM.\n\nContent for the `\u003cfjs-module\u003e` and `\u003cfjs-page\u003e` elements is loaded either by referencing external HTML documents using the\nsrc attribute or by specifying the content directly within the element. All such content is treated as a complete\nHTML document, with the `\u003cfjs-page\u003e` or `\u003cfjs-module\u003e` element being the root element. (Note: if the content is specified\ndirectly within the element, a `\u003chtml\u003e` tag is not required, and certain tags such as `\u003chead\u003e`, `\u003ctitle\u003e`, `\u003cbody\u003e`, and others\nthat can only appear once in a document, as well as any `\u003cscript\u003e` or `\u003cstyle\u003e` tags that are not intended to be run immediately\nwhen the application is loaded, must be prefixed with \"fjs-\".) Any modules loaded in this manner may be added to either\na `\u003cfjs-loaded-modules\u003e` or `\u003cfjs-cache\u003e` element within the `\u003cfjs-app\u003e` element (only one of each such element is allowed\nwithin the `\u003cfjs-app\u003e` element, and these will be created automatically if not specified). Modules placed in `\u003cfjs-loaded-modules\u003e`\nwill be loaded and run immediately when the application is loaded, while modules placed in `\u003cfjs-cache\u003e` will be loaded\nimmediately but will not be run until initialized by the application. Modules that are intended to be cloned and\ninitialized independently should be placed in `\u003cfjs-cache\u003e`, while modules that are primarily intended to be used to\ncompartmentalize application-wide code and style should be placed in `\u003cfjs-loaded-modules\u003e`.\n\n#### Controller Classes\n\nIf defining the application using the controller classes, the application is defined by creating an instance of the\n`FrameJSApp` class, using the desired app name as the single argument to the constructor. If a `\u003cfjs-app\u003e` element already\nexists in the DOM with the given name, this element will be associated with the `FrameJSApp` instance. Otherwise, a new\n`\u003cfjs-app\u003e` element will be created with the given name; this will need to be added to the DOM in order to initialize the\napplication. This element (of class `FrameJSAppElement`) can be accessed through the `FrameJSApp.rootElement` property.\n\nThe configuration of this application is specified in the `FrameJSApp.config` property, which is an object containing\nthe configuration directives as they would be defined in an external JSON file. (Such a file can be used instead by\ncalling the `FrameJSApp.config.fromFile()` method using the path to the file as the argument.) Modules and pages can\nbe defined by creating instances of the FrameJSModule and FrameJSPage classes, respectively, and added to the application\nusing either the `FrameJSApp.loadModule()` or `FrameJSApp.addToCache()` methods, depending on whether the module should\nbe loaded immediately or not. (FrameJSPage instances can only be added with the latter.) Modules and pages can also\nbe autoloaded en masse by referencing them in an external JSON file and specifying the path to this file as the argument\nto the `FrameJSApp.autoload()` method, in a `\u003cfjs-property name=\"autoload\"\u003e` element in the `\u003cfjs-config\u003e` element, or as an\nautoload property in an external JSON configuration file.\n\nThe FrameJSApp class also provides methods for loading and unloading modules and pages, as well as for navigating\nbetween pages. `FrameJSApp.back()` and `FrameJSApp.forward()` can be used as functional equivalents for the browser's\nback and forward buttons, respectively. The `FrameJSApp.navigate()` method can be used to navigate to a specific page\nor module identified by name, and the `FrameJSApp.reload()` method can be used to reload the current page or module.\nThe `FrameJSApp.loadModule()` and `FrameJSApp.unloadModule()` methods can be used to load and unload modules that are\nnot part of the navigation flow. The `FrameJSApp.addToCache()` and `FrameJSApp.removeFromCache()` methods can be used to\nadd and remove modules or pages from the cache, respectively. (Note: removing a module or page from the cache will\nnot unload it if it is currently loaded. To unload a module or page, use the `FrameJSApp.unloadModule()` method, or\nthe equivalent `unload()` method on the `FrameJSModule` or `FrameJSPage` instance.)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitsunetech-com%2Fframejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkitsunetech-com%2Fframejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitsunetech-com%2Fframejs/lists"}