{"id":15011807,"url":"https://github.com/js-factory/onejs","last_synced_at":"2025-04-12T04:12:11.485Z","repository":{"id":57122327,"uuid":"161502909","full_name":"js-factory/onejs","owner":"js-factory","description":"A JavaScript framework for building high performance web app with react/preact","archived":false,"fork":false,"pushed_at":"2023-04-30T01:28:45.000Z","size":345,"stargazers_count":4,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T04:12:05.468Z","etag":null,"topics":["onejs","preactjs","pwa","reactjs","spa","unified-javascript-framework"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/js-factory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2018-12-12T14:52:25.000Z","updated_at":"2022-05-29T11:08:21.000Z","dependencies_parsed_at":"2024-09-20T06:30:26.666Z","dependency_job_id":null,"html_url":"https://github.com/js-factory/onejs","commit_stats":{"total_commits":31,"total_committers":4,"mean_commits":7.75,"dds":"0.22580645161290325","last_synced_commit":"85b70e5c1358dff0098313cf015756b9d109024a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-factory%2Fonejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-factory%2Fonejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-factory%2Fonejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-factory%2Fonejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/js-factory","download_url":"https://codeload.github.com/js-factory/onejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248514205,"owners_count":21116903,"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":["onejs","preactjs","pwa","reactjs","spa","unified-javascript-framework"],"created_at":"2024-09-24T19:41:44.463Z","updated_at":"2025-04-12T04:12:11.459Z","avatar_url":"https://github.com/js-factory.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# onejs\nA Javascript [framework](https://en.wikipedia.org/wiki/Software_framework) for building a high-performance web application. \n\n## Motivation\nOnejs provides an abstract layer over a javascript library. It enables developer/organization to write a vanilla javascript code and bind it with the framework you choose to build your application with.\n\n##### It's hard to switch between frameworks if your performance budget does not meet with one\nConsidering all top javascript library adds a considerable amount of initial javascript chunk into your application bundle i.e. react size is ~30kb. For any larger application, switching from one framework to another is a relatively complex task and requires a lot of effort and time. onejs try to solve this problem and reduce the time and effort require in switching frameworks.\n\n##### Classical component go polluted over time and becomes hard to maintain\nThis has been a common problem that after certain amount of time your class component gets complex and a lot of business logic being written into a single javascript file. With the functional programming approach, we are trying to solve some of these problems. A developer needs to create small functions and attach those to your component. This allows you to maximize the usage of vanilla javascript.\n\n## Installation\n```\nnpm i -S @js-factory/onejs\n```\n\n## Dependency \nYou need to install preact in the host application.\n```\nnpm i -S preact\n```\n\n## APIs\nOnejs offers the following APIs.\n\n- Component\n- withStore\n- createStore\n- actionCreator\n\n### Component\n**Component** is a higher-level component. It creates a react or preact component and binds all given properties and methods to it.\n\nPlease read [hoc](https://www.npmjs.com/package/@js-factory/hoc) documentation for further details.\n\nA typical component declaration looks like this.\n\n```javascript\n// FooComponent.js\n\nimport { Component } from '@js-factory/onejs';\nimport componentDidMount from './hooks/componentDidMount';\nimport onClickHandler from './handlers/onClickHandler';\nimport someOtherHandler from './util/someOtherHandler';\nimport FooTmpl from './FooTmpl';\n\n@Component({\n   componentDidMount,\n   someOtherHandler,\n   onClickHandler,\n   state: {\n       x: 0\n   },\n   instanceProps: {\n       y: 0\n   },\n   template: FooTmpl\n})\nexport default class FooComponent { }\n\n```\n\n### withStore\nEvery frontend application (read SPA) needs a persistent data store. The application should be able to maintain its state during back \u0026 forth page transitions. `withStore` connects the component with application's data store. \n\nConfiguring `withStore` is very simple. It has two options. 1) **watcher** , 2) action\n\n#### watcher\nData store of an application is a big JavaScript objects. It holds the application state. **watcher** represents the keys in applications store (read a big javascript object). When you define watcher in `withStore`, onejs connects your component with the application store and any changes to these properties will update (re-render) the component.\n\n// App data store\n\n```js\nconst appDataStore = {\n   todos: [\n       // todo\n   ],\n   counter: 0 // initial value\n};\n```\n\n#### action\nThe only way to connect to the store is an `action`. Actions allow you to modify the application state.\n\n**Complete Example**\n\n```javascript\n\n// ToDoContainer.js\nimport { Component, withStore } from '@js-factory/onejs';\nimport componentDidMount from './hooks/componentDidMount';\nimport increment from './actions/increment';\nimport fetchToDoList from './actions/fetchToDoList';\nimport onClickHandler from './handlers/onClickHandler';\nimport TodoTmpl from './ToDoTmpl';\n\n@withStore({\n   watcher: ['counter', 'todos'],\n   actions: {\n       increment,\n       fetchToDoList\n   }\n})\n@Component({\n   componentDidMount,\n   onClickHandler,\n   state: {\n       x: 0,\n   },\n   instanceProps: {\n       y: 0\n   },\n   template: TodoTmpl\n})\nexport default class ToDoContainer { }\n\n// increment.js\nimport { actionCreator } from '@js-factory/onejs';\n\nexport default actionCreator('INCREMENT', {\n   key: 'counter',\n   format({ count }) {     // `reducer` middleware setting\n       return {\n           count: count + 1\n       };\n   }\n});\n\n// fetchTodoList.js\n\nimport { actionCreator } from '@js-factory/onejs';\n\nexport default actionCreator('FETCH_TODO_LIST', {\n   key: 'todos',   // store property\n   url: 'https://jsonplaceholder.typicode.com/todos'\n});\n\n```\n\n### createStore\n**createStore** initializes application store. It takes 2 arguments to build the store. 1) initial state of an application, and 2) middleware(s) to execute before updating the store properties.\n\n```javascript\n// bootstrap.js\n\nimport { createStore } from '@js-factory/onejs';\nimport middleware from './middleware'\n\nconst store = createStore({} , /* optional */ middleware);\n\nexport default store;\n\n```\n### actionCreator\n*action* refers to store handler. The only way to modify a store property is to trigger and action. And action must be created by using `actionCreator`.\n\n```javascript\n// fetchTodoList.js\nimport { actionCreator } from '@js-factory/onejs';\n\nexport default actionCreator('FETCH_TODO_LIST', {\n   key: 'todos',   // store property\n   url: 'https://jsonplaceholder.typicode.com/todos'\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-factory%2Fonejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjs-factory%2Fonejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-factory%2Fonejs/lists"}