{"id":13503649,"url":"https://github.com/opal/opal-browser","last_synced_at":"2025-04-05T04:11:53.842Z","repository":{"id":8870289,"uuid":"10583853","full_name":"opal/opal-browser","owner":"opal","description":"Browser support for Opal.","archived":false,"fork":false,"pushed_at":"2024-02-21T06:02:22.000Z","size":3709,"stargazers_count":110,"open_issues_count":11,"forks_count":36,"subscribers_count":18,"default_branch":"master","last_synced_at":"2024-03-25T21:16:46.155Z","etag":null,"topics":["opal"],"latest_commit_sha":null,"homepage":null,"language":"Ruby","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/opal.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2013-06-09T13:57:02.000Z","updated_at":"2024-06-18T20:02:44.531Z","dependencies_parsed_at":"2024-01-16T10:38:00.748Z","dependency_job_id":"4394c774-d100-4552-8134-0e7976181627","html_url":"https://github.com/opal/opal-browser","commit_stats":{"total_commits":830,"total_committers":21,"mean_commits":"39.523809523809526","dds":"0.24939759036144582","last_synced_commit":"3c657a0a2b9f4e5e2625c9b3c889b8c253a015a6"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opal%2Fopal-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opal%2Fopal-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opal%2Fopal-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opal%2Fopal-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opal","download_url":"https://codeload.github.com/opal/opal-browser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247284951,"owners_count":20913704,"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":["opal"],"created_at":"2024-07-31T23:00:42.464Z","updated_at":"2025-04-05T04:11:53.822Z","avatar_url":"https://github.com/opal.png","language":"Ruby","readme":"Opal-Browser - Client side web development in pure Ruby, using Opal\n===================================================================\n\n[![Gem Version](https://badge.fury.io/rb/opal-browser.svg)](http://badge.fury.io/rb/opal-browser)\n[![Code Climate](https://img.shields.io/codeclimate/maintainability-percentage/opal/opal-browser.svg)](https://codeclimate.com/github/opal/opal-browser)\n[![Build Status](https://github.com/opal/opal-browser/workflows/build/badge.svg)](https://github.com/opal/opal-browser/actions?query=workflow%3Abuild)\n[![Join Chat](https://img.shields.io/badge/slack-join%20chat-46BC99?logo=slack\u0026style=flat)](https://slack.opalrb.com/)\n[![Stack Overflow](https://img.shields.io/badge/stackoverflow-%23opalrb-orange.svg?style=flat)](https://stackoverflow.com/questions/ask?tags=opalrb,opal-browser)\n[![Documentation](https://img.shields.io/badge/docs-updated-blue.svg)](https://rubydoc.info/gems/opal-browser)\n\nThis library aims to be a full-blown wrapper for all the browser API as defined by\nHTML5.\n\nIt provides a very JQuery-like interface to DOM, but itself it doesn't use nor\nrequire JQuery nor opal-jquery (which is an alternative library for interfacing\nthe web browser). The main difference though is that Opal-Browser goes far beyond\nwhat JQuery does.\n\nUsage\n=====\n\n_Gemfile_\n\n```ruby\nsource 'https://rubygems.org/'\n\ngem 'opal-browser'\n```\n\n_Server side (config.ru, Rakefile, Rails, Sinatra, Roda, etc. - not needed for static compilation)_\n\n```ruby\nrequire 'opal-browser'\n# Your server code here\n```\n\n_Browser side_\n\n```ruby\nrequire 'opal'\nrequire 'native'\nrequire 'promise'\nrequire 'browser/setup/full'\n\n# Your Opal code here\n$document.body \u003c\u003c \"Hello world!\"\n```\n\n_Static Compile Opal + Opal-Browser library_\n\n```bash\nbundle exec opal -c -q opal-browser -p native -p promise -p browser/setup/full -e '#' -E \u003e opal-browser.js\n```\n\n_Static Compile your application_\n\n```bash\nbundle exec opal -Oc -s opal -s native -s promise -s browser/setup/full app/application.rb \u003e application.js\n```\n\n_And load it in HTML!_\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eMy Application\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cscript src='opal-browser.js' onload='Opal.require(\"native\"); Opal.require(\"promise\"); Opal.require(\"browser/setup/full\");'\u003e\u003c/script\u003e\n  \u003cscript src='application.js'\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nSee the `examples/integrations/` directory for various ideas on how to quickly start\ndevelopment using opal-browser.\n\nFeatures\n========\nThis is a list of many currently wrapped features and some details on them.\n\nDOM\n---\nDOM support is complete as far as I know, it has a very Nokogiri feel to it\nwith obvious differences where relevant (for instance, event handling).\n\n```ruby\n$document.ready do\n  alert \"yo dawg, I'm all loaded up in here\"\nend\n```\n\nIt also supports a markaby inspired builder DSL (using Paggio) which generates\nDOM nodes directly instead of creating a string.\n\n```ruby\n$document.ready do\n  DOM {\n    div.info {\n      span.red \"I'm all cooked up.\"\n    }\n  }.append_to($document.body)\nend\n```\n\nEvents\n------\n\nAdd an event to a given element:\n\n```ruby\n$document.at_css(\"button\").on(:click) do |e|\n  e.prevent # Prevent the default action (eg. form submission)\n  # You can also use `e.stop` to stop propagating the event to other handlers.\n  alert \"Button clicked!\"\nend\n```\n\nOr add it to a parent element and use a delegator, so that an event gets fired\nwhen any button children of `$document` is clicked:\n\n```ruby\n$document.on(:click, \"button\") do |e|\n  e.prevent\n  # e.on is a button that has been clicked\n  e.on.inner_text = \"Clicked!\"\nend\n```\n\nRun an event once with `#one` instead of `#on`, or disable an event with `#off`.\n\nCSSOM\n-----\nCSSOM support (using Paggio) is still incomplete but the useful parts are\nimplemented, this includes a DSL for generating a CSS style and the same DSL\nis also used to change style declarations (which can either belong to a\n`DOM::Element` or a `CSS::Rule::Style`).\n\n```ruby\n$document.body.style.apply {\n  background color: 'black'\n  color 'white'\n  font family: 'Verdana'\n}\n```\n\nAJAX \u0026 SJAX\n-----------\nThe `XMLHttpRequest` API has been wrapped completely, it also optionally\nsupports binary results as typed-arrays.\n\nIt easily allows for synchronous and asynchronous requests.\n\n```ruby\nrequire 'browser/http'\n\nBrowser::HTTP.get \"/something.json\" do\n  on :success do |res|\n    alert res.json.inspect\n  end\nend\n```\n\nWebSocket\n---------\nWebsockets have been fully wrapped and they are easily configurable with\nblocks.\n\n```ruby\nrequire 'browser/socket'\n\nBrowser::Socket.new 'ws://echo.websocket.org' do\n  on :open do\n    every 1 do\n      puts \"ping\"\n    end\n  end\n\n  on :message do |e|\n    log \"Received #{e.data}\"\n  end\nend\n```\n\nEventSource\n-----------\nEvent sources have been implemented and are easily configurable with blocks.\n\n```ruby\nrequire 'browser/event_source'\n\nBrowser::EventSource.new '/events' do |es|\n  es.on :message do |e|\n    alert e.data\n  end\n\n  es.on :custom do |e|\n    alert \"custom #{e.data}\"\n  end\nend\n```\n\nHistory\n-------\nThe HTML5 History API has been fully wrapped.\n\n```ruby\ncurrent = $window.history.current\n$window.history.replace(\"?get=params\")\n$window.history.push(\"?get=params\")\n$window.history.back\n\n$window.on :popstate do |e|\n  p \"User clicked a back button! He is now on #{$window.history.current}\"\nend\n```\n\nStorage\n-------\nThe HTML5 Storage API has been wrapped and it exports a single Storage class\nthat uses the most appropriate and available API to store data locally.\n\n```ruby\nrequire 'browser/storage'\n\n$storage = $window.storage\n$storage[:hello] = \"world\"\n```\n\nDatabase SQL\n------------\nWebSQL has been fully wrapped (Chromium-only)\n\n```ruby\nrequire 'browser/database/sql'\n\ndb = Browser::Database::SQL.new 'test'\ndb.transaction {|t|\n  t.query('CREATE TABLE test(ID INTEGER PRIMARY KEY ASC, text TEXT)').then {\n    t.query('INSERT INTO test (id, text) VALUES(?, ?)', 1, 'huehue')\n  }.then {\n    t.query('INSERT INTO test (id, text) VALUES(?, ?)', 2, 'jajaja')\n  }.then {\n    t.query('SELECT * FROM test')\n  }.then {|r|\n    r.each {|row|\n      alert row.inspect\n    }\n  }\n}\n```\n\nBrowser support\n===============\n\n* Edge (Current - 3) to Current\n* Firefox (Current - 3) to Current\n* Chrome (Current - 3) to Current\n* Safari (Current - 3) to Current\n* Opera (Current - 3) to Current\n\nAny problem above browsers should be considered and reported as a bug.\n\n(Current - 3) to Current denotes that we support the current major stable version\nof the browser and 3 versions preceding it. For example, if the current version\nof a browser is 24.x, we support all versions between 21.x to 24.x.\n\nWe will accept compatibility patches for even earlier browser versions. Opal-Browser\nis written in such a way, that it integrates a robust compatibility check system,\nsimilar to Modernizr, and the history of this library goes even as far as supporting\nInternet Explorer 6.\n\nSee the [polyfills documentation](docs/polyfills.md) if you wish to polyfill some\nbehaviors not supported by the ancient web browsers (like `querySelectorAll`).\n\nLicense\n=======\n\n(The MIT License)\n\nCopyright (C) 2013-2018 by meh\u003cbr\u003e\nCopyright (C) 2019-2021 hmdne and the Opal-Browser contributors\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n","funding_links":[],"categories":["Uncategorized","Ruby"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopal%2Fopal-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopal%2Fopal-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopal%2Fopal-browser/lists"}