{"id":24679063,"url":"https://github.com/evinism/oceanic","last_synced_at":"2026-04-17T11:32:00.839Z","repository":{"id":79747235,"uuid":"482197498","full_name":"evinism/oceanic","owner":"evinism","description":"Small but Mighty React-like","archived":false,"fork":false,"pushed_at":"2022-05-02T08:56:11.000Z","size":288,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-11T07:09:45.275Z","etag":null,"topics":["browser","dom","dom-manipulation","hooks","javascript","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/evinism.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-04-16T08:22:26.000Z","updated_at":"2022-04-28T06:26:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"a552f8db-6c2f-4be7-9978-3ebe06f2f6b7","html_url":"https://github.com/evinism/oceanic","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/evinism/oceanic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evinism%2Foceanic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evinism%2Foceanic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evinism%2Foceanic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evinism%2Foceanic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evinism","download_url":"https://codeload.github.com/evinism/oceanic/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evinism%2Foceanic/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31927743,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-17T10:35:34.458Z","status":"ssl_error","status_checked_at":"2026-04-17T10:35:09.472Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["browser","dom","dom-manipulation","hooks","javascript","react","typescript"],"created_at":"2025-01-26T13:19:52.690Z","updated_at":"2026-04-17T11:32:00.820Z","avatar_url":"https://github.com/evinism.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Oceanic: Small but mighty React-like\n\nOceanic aims to make it easy to build dynamic UIs without the need for fancy compilation.\n\nThink of it as a reduction of the best parts of React, without any magic!\n\ninstallation via `npm install --save oceanic`.\n\n## Overview / Examples\n\nBasic rendering can be done as follows:\n\n```js\n// with html:\n// \u003cbody\u003e\u003cdiv id=\"root\"\u003e\u003c/div\u003e\u003c/body\u003e\nimport {div, p, h1, render} from 'oceanic';\n\nconst component = div([\n  h1(\"Hello, world!\"),\n  p(\"I'm Oceanic!\")\n]);\n\nrender(component, document.getElementById('root'));\n```\n\n# Hooks\n\nOceanic has 3 hooks: `useState`, `useEffect`, and `useContext`;\n\nHooks in oceanic are similar to their React counterparts, but are provided slightly differently:\n\n```js\nimport {div, button, render} from 'oceanic';\n\nconst component = ({ useState }) =\u003e {\n  const [isClicked, setIsClicked] = useState(false);\n  return div([\n    div(isClicked ? \"clicked\" : \"unclicked!\"),\n    button({onclick: () =\u003e setIsClicked(true)}, \"click me!!\"),\n  ]);\n};\n\nrender(component, document.getElementById('root'));\n```\n\nOceanic's hook model allows for true referential transparency in functions, allowing for nested\nhook usage, even with conditionals!\n\n```js\nimport {div, render} from 'oceanic';\n\nconst component = div([\n  h1(\"Click below I guess!\"),\n  ({useState}) =\u003e {\n    const [outerState, setOuterState] = useState(true);\n    if (!outerState) {\n      return null;\n    }\n    return div(({ useState }) =\u003e {\n      const [innerState, setInnerState] = useState(\"todo text\");\n      return `inner state: ${innerState}`;\n    });\n  }\n]);\n\nrender(component, document.getElementById('root'));\n```\n\n## Some More Details for all Who Want Them\nIf you're here, you clearly want to know more. \n\n### Oceanic's node and component model. \n\n`OceanicNode`s are anything that Oceanic can render. The output of `div()`, `span()`, `frag()`, or any other element is a OceanicNode. A `Component` in oceanic is simply a function from `Hooks` to an optional `OceanicNode`\n\nIn most cases where you pass in a Component, you can just directly pass in a Oceanic Node instead.\n\n### Dom Diffing\n\nOceanic uses incremental dom, rather than creating a virtual dom. \n\n### Keys\nWhen determining which state lines up to which element in a constantly-changing web app, Oceanic (like React), uses keys. While keys in React are represented as props, keys in `oceanic` are more separated. Keys can be set via the `key()` function.\n\nWhen rendering a series of child nodes, Oceanic uses a \"first come, first serve\" model for lining up internal states to branches in the tree, taking keys into account.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevinism%2Foceanic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevinism%2Foceanic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevinism%2Foceanic/lists"}