{"id":16515690,"url":"https://github.com/insin/isomorphic-lab","last_synced_at":"2025-09-21T00:31:36.037Z","repository":{"id":24753438,"uuid":"28166272","full_name":"insin/isomorphic-lab","owner":"insin","description":"Isomorphic React experimentation","archived":false,"fork":false,"pushed_at":"2015-07-30T16:04:22.000Z","size":484,"stargazers_count":143,"open_issues_count":6,"forks_count":8,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-06-04T21:31:17.591Z","etag":null,"topics":["experiment","forms","isomorphic","react","react-app","react-router","universal"],"latest_commit_sha":null,"homepage":"https://isomorphic-lab.herokuapp.com","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/insin.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":"2014-12-18T03:13:19.000Z","updated_at":"2025-03-05T11:35:22.000Z","dependencies_parsed_at":"2022-07-25T11:17:57.877Z","dependency_job_id":null,"html_url":"https://github.com/insin/isomorphic-lab","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/insin/isomorphic-lab","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fisomorphic-lab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fisomorphic-lab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fisomorphic-lab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fisomorphic-lab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/insin","download_url":"https://codeload.github.com/insin/isomorphic-lab/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fisomorphic-lab/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276179298,"owners_count":25598565,"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","status":"online","status_checked_at":"2025-09-20T02:00:10.207Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["experiment","forms","isomorphic","react","react-app","react-router","universal"],"created_at":"2024-10-11T16:18:07.040Z","updated_at":"2025-09-21T00:31:35.779Z","avatar_url":"https://github.com/insin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Isomorphic Lab\n\n![logo](https://github.com/insin/isomorphic-lab/raw/master/logo.png)\n\nThis repo is being used to experiment with writing isomorphic JavaScript apps with [React](http://facebook.github.io/react/) 0.13.X, [React Router](https://github.com/rackt/react-router) 1.0.0-betaX and [express](https://github.com/strongloop/express).\n\nIt uses [newforms](https://github.com/insin/newforms) for form display and validation on both ends - this could be done manually with any component which can populate its form fields and display error messages based on its props and state, though.\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\n- [Functionality](#functionality)\n  - [Data fetching](#data-fetching)\n  - [Title generation ([source](https://github.com/insin/isomorphic-lab/blob/master/src/utils/getTitle.js))](#title-generation-sourcehttpsgithubcominsinisomorphic-labblobmastersrcutilsgettitlejs)\n- [Client rehydration](#client-rehydration)\n- [Express middleware ([source](https://github.com/insin/isomorphic-lab/blob/payload/src/react-router-middleware.jsx))](#express-middleware-sourcehttpsgithubcominsinisomorphic-labblobpayloadsrcreact-router-middlewarejsx)\n  - [`options.title`](#optionstitle)\n  - [Response handling](#response-handling)\n    - [Successful rendering](#successful-rendering)\n    - [Non-GET requests](#non-get-requests)\n    - [Redirecting](#redirecting)\n    - [Re-rendering](#re-rendering)\n    - [Errors](#errors)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n### Functionality\n\n#### Data fetching\n\nReact Router's experimental `AsyncProps` is used to fetch data, with route components defining a static `loadProps(params, callback(err, data))` function, which will be called when their route is matched against the current URL.\n\n#### Title generation ([source](https://github.com/insin/isomorphic-lab/blob/master/src/utils/getTitle.js))\n\nRoute components can define a static `title` attribute or a synchronous `getTitle(props, params)` function, which will be called when the route is matched against the current URL.\n\nAny async props which will be passed to the component when it's rendered will be passed as the first first argument to `getTitle()`.\n\nEach handler should only define or return its own portion of the URL. e.g. the top-level component might define the site name as a static `title`, while a nested blog post component might define a static `getTitle(props)` which returns the title of the post.\n\nBy default, these title parts will be reversed and joined with a mid-dot to form the final title to be included in a `\u003ctitle\u003e` element or set on `document.title` depending on the environment - this is configurable.\n\n### Client rehydration\n\nThe initial render will make use of `AsyncProps.rehydrate()` with initial async props provided via a `window.__PROPS__` variable when running on the client.\n\n### Express middleware ([source](https://github.com/insin/isomorphic-lab/blob/payload/src/react-router-middleware.jsx))\n\nUsage:\n\n```\nvar reactRouter = require('./react-router-middleware')\n\napp.use(reactRouter(routes[, options]))\n```\n\n#### `options.title`\n\nAn object to be passed as options to `getTitle()` - available options are:\n\n`reverse` (`true`) - should title parts be reversed into most-specific-first order before joining?\n\n`join` (`' · '`) - string to be used to join title parts.\n\n`defaultTitle` (`'(undefined)'`) - default title to use if none of the matched route components provide title parts.\n\n#### Response handling\n\nIn addition to performing the common functionality described above, the express middleware handles the following scenarios:\n\n##### Successful rendering\n\nFor a regular, successful Handler render, a `'react'` view will be rendered with the following locals:\n\n`title` - generated document title\n\n`html` - rendered component output\n\n`props` - props which were used to render the component, serialised to a JSON string.\n\n##### Non-GET requests\n\nNon-GET request bodies will be set on the Router's location state as a `body` property.\n\nThe request method will also be available as a `method` property.\n\n##### Redirecting\n\nIf `transition.to()` is used in an `onEnter()` hook, this will be turned into an HTTP 303 Redirect response...\n\n##### Re-rendering\n\n...unless the redirect location has been given some `state`. In this case, the middleware will create a new redirect location and run routing on it.\n\nThis can be used to render another route back to the user as a response, e.g. rendering a form with user input and validation errors in response to a POST request which contained an invalid body.\n\n##### Errors\n\nIf an error is detected at any time, the middleware will call its `next()` callback with the error to allow whatever error handling middleware is configured elsewhere to pick it up.\n\n**MIT Licensed**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Fisomorphic-lab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finsin%2Fisomorphic-lab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Fisomorphic-lab/lists"}