{"id":21153175,"url":"https://github.com/hyperstack-org/hyperstack-js","last_synced_at":"2025-03-14T15:11:49.940Z","repository":{"id":40187852,"uuid":"230481579","full_name":"hyperstack-org/hyperstack-js","owner":"hyperstack-org","description":"Hyperstack client-side components","archived":false,"fork":false,"pushed_at":"2023-01-20T18:15:15.000Z","size":1168,"stargazers_count":1,"open_issues_count":15,"forks_count":2,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-01-21T08:31:25.639Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Ruby","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/hyperstack-org.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}},"created_at":"2019-12-27T17:02:11.000Z","updated_at":"2020-06-03T12:09:55.000Z","dependencies_parsed_at":"2023-02-12T04:15:35.070Z","dependency_job_id":null,"html_url":"https://github.com/hyperstack-org/hyperstack-js","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperstack-org%2Fhyperstack-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperstack-org%2Fhyperstack-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperstack-org%2Fhyperstack-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperstack-org%2Fhyperstack-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyperstack-org","download_url":"https://codeload.github.com/hyperstack-org/hyperstack-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243597842,"owners_count":20316844,"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":[],"created_at":"2024-11-20T10:50:07.039Z","updated_at":"2025-03-14T15:11:49.920Z","avatar_url":"https://github.com/hyperstack-org.png","language":"Ruby","readme":"#  Hyperstack\n\n### Hyperstack.js\n\nHyperstack client-side including:\n\n+ Hyperstack Components\n+ Hyperstack Stores\n+ Hyperstack Operations\n+ Opal Active Support, Opal JQuery\n\nNote: React, ReactDOM, createReactClass, ReactRailsUJS and JQuery are not included. You will need to provide these.\n\n### Hyperstack-compiler.js\n\nCompiles code in your browser. Client-side Hyperstack and Opal for static sites or fast prototyping, with no backend or build process needed.\n\n+ Ruby code in your HTML pages is compiled into JavaScript on page load\n+ You can work with Hyperstack Components, Stores, Operations and HyperRouter\n+ No backend dependency or setup required\n\n### Hyper-router.js\n\nRuby DSL wrapper of React Router V4. Requires ReactRouter, ReactRouterDOM and History.\n\n## Documentation and Help\n\n+ Please see the [Hyperstack](https://docs.hyperstack.org/) website for documentation\n+ [Join](https://join.slack.com/t/hyperstack-org/shared_invite/enQtNTg4NTI5NzQyNTYyLWQ4YTZlMGU0OGIxMDQzZGIxMjNlOGY5MjRhOTdlMWUzZWYyMTMzYWJkNTZmZDRhMDEzODA0NWRkMDM4MjdmNDE) our Slack group for help and support\n\nSee [VERSIONS](https://github.com/hyperstack-org/hyperstack/blob/master/VERSIONS.md) for the version numbers of the included Gems.\n\n## How it works\n\n##### Front-end\n\n+ Hyperstack.js includes Hyperstack's client side Components, Operations and Stores.\n+ Hyperstack-compiler.js includes Opal Compiler for compiling Ruby Hyperstack code in your browser.\n+ Hyper-router includes a client-side build of the Hyper-router gem\n\n##### No back-end (compile Ruby code in your browser)\n\nIf you do not want a backend then you can use Hyperstack-compiler.js to compile code in your browser. Your ruby code will be compiled by the browser into JavaScript and executed.  Any compilation or runtime errors will be briefly reported to the console.\n\n\n##### Back-end (compile Ruby code on the server)\n\nTo compile your code server-side, you will need a backend integrated with Opal. Your choices are:\n\n+ Hyperstack Gem for Rails integration (including Isomprphic Models \u0026 Operations)\n+ Opal Sprockets for Rack backend for a simple build process\n+ Minimal Rake task to compile with Opal\n+ Node.js using Webpack to compile Opal code\n\nSee all the installation options on https://docs.hyperstack.org/installation\n\n## How to use\n\n### Hyperstack Components, Operations, Stores, and Router\n\nThe simplest way to install is with NPM.\n\n```\nnpm install hyperstack-js --save\n```\n\nThen include the libraries in your Webpack script:\n\n```javascript\n// following needed before hyperstack-js\nReactDOM = require('react-dom');\nReact = require('react');\ncreateReactClass = require('create-react-class');\nReactRailsUJS = require('react_ujs')\n\n// following needed before hyper-router (if you are using ReactRouter)\nReactRouter = require('react-router');\nReactRouterDOM = require('react-router-dom');\nHistory = require('history');\n\n// Jquery and Opal\n$ = require(\"jquery\");\nrequire('hyperstack-js/dist/opal');\n\n// Hyperstack Components, Stores and Operations\nrequire('hyperstack-js/dist/hyperstack');\n\n// Hyper-router if you are using ReactRouter\nrequire('hyperstack-js/dist/hyper-router');\n```\n\nIf you are not using NPM/Webpack then you will need to bring in Hyperstack-JS in your HTML page:\n\n```html\n\u003chead\u003e\n  \u003c!-- React and JQuery (or bring your own) --\u003e\n  \u003cscript src=\"https://unpkg.com/react@16.8.6/umd/react.production.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/create-react-class@15.6.3/create-react-class.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/react_ujs@2.6.0/react_ujs/dist/react_ujs.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://code.jquery.com/jquery-2.1.4.min.js\"\u003e\u003c/script\u003e\n\n  \u003c!-- React Router (if you are using it) --\u003e\n  \u003cscript src=\"https://unpkg.com/react-router@4.3.1/umd/react-router.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/react-router-dom@4.3.1/umd/react-router-dom.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/history@4.10.1/umd/history.min.js\"\u003e\u003c/script\u003e\n\n  \u003c!-- Opal (or bring your own) --\u003e\n  \u003cscript src=\"https://rawgit.com/hyperstack-org/hyperstack-js/master/dist/opal.min.js\"\u003e\u003c/script\u003e\n\n  \u003c!-- Hyperstack-js --\u003e\n  \u003cscript src=\"https://rawgit.com/hyperstack-org/hyperstack-js/master/dist/hyperstack.min.js\"\u003e\u003c/script\u003e\n\n  \u003c!-- Hyper-router.js (if you are using React Router) --\u003e\n  \u003cscript src=\"https://rawgit.com/hyperstack-org/hyperstack-js/master/dist/hyper-router.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n**That is all you need for Hyperstack Components, Stores, Operations and Router client-side. If you have a back-end building Hyperstack code you are good to go!**\n\n### Hyperstack Compiler\n\nIf you do not have a back-end and you want to compile your Hyperstack code in your browser then follow this step.\n\n#### Setup\n\nAfter completing the steps above, add the following to your Webpack script:\n\n```javascript\nrequire('hyperstack-js/dist/hyperstack-compiler');\n```\n\nOr add the following to your HTML page:\n\n```html\n\u003chead\u003e\n  \u003c!-- Hyperstack-compiler (only needed if you are doing in browser compiling) --\u003e\n  \u003cscript src=\"https://rawgit.com/hyperstack-org/hyperstack-js/master/dist/hyperstack-compiler.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n#### Usage\n\nSpecify your ruby code inside script tags or link to your ruby code using the src attribute `\u003cscript type=\"text/ruby\" src=.../\u003e`\n\n```html\n\u003chead\u003e\n  \u003cscript type=\"text/ruby\"\u003e...\u003c/script\u003e\n\u003c/head\u003e\n```\n\nFinally, mount your Component(s) as a DOM element and specify the Component and parameters using data- tags:\n\n```html\n\u003cbody\u003e\n  \u003cdiv data-hyperstack-mount=\"SayHello\"\n       data-name=\"World\"\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n```\nNote: For a Single Page Application (SPA) you would only mount your first (top-level) Component and that would render all subsequent Components.\n\n#### Example\n\nHere is a simple index.html:\n```ruby\n\u003c!DOCTYPE html\u003e\n\u003c!--[if IE]\u003e\u003c![endif]--\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"\u003e\n    \u003ctitle\u003eHyperstack-JS Demo\u003c/title\u003e\n\n    \u003c!-- React and JQuery --\u003e\n    \u003cscript src=\"https://unpkg.com/react@16.8.6/umd/react.production.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/create-react-class@15.6.3/create-react-class.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/react_ujs@2.6.0/react_ujs/dist/react_ujs.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://code.jquery.com/jquery-2.1.4.min.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- Opal (or bring your own) --\u003e\n    \u003cscript src=\"dist/opal.min.js\"\u003e\u003c/script\u003e\n\n    \u003c!--Hyperstack --\u003e\n    \u003cscript src=\"dist/hyperstack.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"dist/hyperstack-compiler.min.js\"\u003e\u003c/script\u003e\n\n    \u003cscript type=\"text/ruby\"\u003e\n      class SimpleComponent \u003c Hyperstack::Component\n        render(DIV) do\n          BUTTON { 'Push the button' }.on(:click) do\n           alert 'You did it!'\n          end\n        end\n      end\n    \u003c/script\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n  \u003cdiv data-hyperstack-mount=\"SimpleComponent\"\u003e\n  \u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nCopy the code above into an `index.html` file and launch a simple web server with `ruby -run -e httpd . -p 8000` (or if you prefer Python) `python -m SimpleHTTPServer` then navigate to  http://localhost:8000/\n\n#### Want a larger example?\n\nThe [Hyperstack website](https://docs.hyperstack.org/tutorial)\n\n#### Trying it out using GitHub\n\nGithub makes a great sandbox to try out small Hyperstack online with nothing but your browser.\n\nHave a look at the instructions here: https://pages.github.com/\n\nRather than \"cloning\" the repo, and editing your files on your computer you can just create and edit files right on the GitHub site.\n\n#### Mounting Components\n\nhyperstack-js will directly mount components onto DOM elements that have the `data-hyperstack-mount` attribute.  The attribute value should be the fully qualified name of the component.  For example \"MyComponent\".  Any additional data attributes will be passed as params to the component.  The attribute names will be snake cased (i.e. `data-foo-bar` becomes the `foo_bar` key)\n\n## Building and Contributing\n\nTo build, clone the repo, run `bundle install` and then `bundle exec rake`\n\nThis will combine all the pieces and build `hyperstack.js`, `hyperstack-compiler.js`, `hyper-router.js`, and `opal.js`.\n\nPublish to NPM `npm publish`\n\nContributions are most welcome!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperstack-org%2Fhyperstack-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyperstack-org%2Fhyperstack-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperstack-org%2Fhyperstack-js/lists"}