Showing preview only (574K chars total). Download the full file or copy to clipboard to get everything.
Repository: brahmosjs/brahmos
Branch: master
Commit: e3bffc1f27b1
Files: 131
Total size: 539.0 KB
Directory structure:
gitextract_ah3xfmck/
├── .editorconfig
├── .eslintrc
├── .flowconfig
├── .gitignore
├── .npmignore
├── .prettierrc
├── .travis.yml
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── babel.config.js
├── bundlesize.config.json
├── docs/
│ └── HOW_IT_WORKS.md
├── example/
│ ├── App.js
│ ├── App.scss
│ ├── Logos.js
│ ├── common/
│ │ └── ReactCredit.js
│ ├── concurrent-mode/
│ │ ├── fakeApi.js
│ │ └── index.js
│ ├── context-api/
│ │ └── index.js
│ ├── error-boundaries/
│ │ └── index.js
│ ├── food-app/
│ │ ├── food-app.css
│ │ ├── food-menu.json
│ │ ├── mobx/
│ │ │ ├── App.js
│ │ │ ├── Comps.js
│ │ │ ├── index.js
│ │ │ └── mobx.js
│ │ ├── react-query/
│ │ │ ├── App.js
│ │ │ ├── Comps.js
│ │ │ ├── hooks.js
│ │ │ ├── index.js
│ │ │ └── zustand.js
│ │ ├── redux/
│ │ │ ├── App.js
│ │ │ ├── Comps.js
│ │ │ ├── index.js
│ │ │ └── redux.js
│ │ └── utils.js
│ ├── hooks/
│ │ └── index.js
│ ├── index.html
│ ├── index.js
│ ├── lazy-component/
│ │ └── index.js
│ ├── portals/
│ │ └── index.js
│ ├── sierpinski-triangle/
│ │ └── index.js
│ ├── suspense-list/
│ │ ├── fakeApi.js
│ │ └── index.js
│ ├── svg-chart/
│ │ └── index.js
│ ├── third-party-component/
│ │ └── index.js
│ ├── time-slicing/
│ │ ├── Chart.js
│ │ ├── Clock.js
│ │ └── index.js
│ ├── todo-list/
│ │ └── index.js
│ ├── use-deferred-value/
│ │ ├── MySlowList.js
│ │ └── index.js
│ └── use-deferred-value-suspense/
│ ├── fakeApi.js
│ └── index.js
├── example_old/
│ ├── App.js
│ ├── ErrorBoundaryExample.js
│ ├── RefsExample.js
│ ├── SVGExample.js
│ ├── TodoList.js
│ ├── UnMountAtNode.js
│ ├── UseStateExample.js
│ ├── concurrentApp.js
│ ├── context.js
│ ├── createPortalExample.js
│ ├── data.json
│ ├── fakeApi.js
│ ├── fakeApiSuspenseList.js
│ ├── friends.json
│ ├── index.html
│ ├── index.js
│ ├── lazySuspenseExample.js
│ ├── suspenseExamples.js
│ └── suspenseListExample.js
├── jest.config.js
├── package.json
├── rollup.config.js
├── src/
│ ├── Children.js
│ ├── Component.js
│ ├── Suspense.js
│ ├── TagNode.js
│ ├── TemplateNode.js
│ ├── TemplateTag.js
│ ├── __tests__/
│ │ ├── BrahmosES6class.test.js
│ │ ├── BrahmosPureComponent.test.js
│ │ ├── __snapshots__/
│ │ │ └── listRendering.test.js.snap
│ │ ├── attributes.test.js
│ │ ├── children_apis.test.js
│ │ ├── context.test.js
│ │ ├── jest.setup.js
│ │ ├── listRendering.test.js
│ │ ├── memo.test.js
│ │ ├── setState.test.js
│ │ ├── testUtils.js
│ │ └── utils.test.js
│ ├── brahmos.js
│ ├── brahmosNode.js
│ ├── circularDep.js
│ ├── configs.js
│ ├── createContext.js
│ ├── createElement.js
│ ├── createPortal.js
│ ├── effectLoop.js
│ ├── fiber.js
│ ├── flow.types.js
│ ├── functionalComponentInstance.js
│ ├── helpers/
│ │ └── shallowEqual.js
│ ├── hooks.js
│ ├── index.js
│ ├── memo.js
│ ├── parseChildren.js
│ ├── processArrayFiber.js
│ ├── processComponentFiber.js
│ ├── processTagFiber.js
│ ├── processTextFiber.js
│ ├── reRender.js
│ ├── reactEvents.js
│ ├── refs.js
│ ├── render.js
│ ├── scheduler.js
│ ├── tags.js
│ ├── tearDown.js
│ ├── transitionUtils.js
│ ├── unmountComponentAtNode.js
│ ├── updateAttribute.js
│ ├── updateUtils.js
│ ├── utils.js
│ └── workLoop.js
├── tsconfig.json
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
# EditorConfig is awesome: http://EditorConfig.org
root = true
[*]
indent_size = 2
charset = utf-8
end_of_line = lf
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .eslintrc
================================================
{
"env": {
"browser": true,
"jest/globals": true
},
"parser": "babel-eslint",
"extends": ["standard", "prettier"],
"plugins": ["flowtype", "jest"],
"rules": {
"comma-dangle": ["error", "always-multiline"],
"semi": ["error", "always"],
"flowtype/define-flow-type": 1
}
}
================================================
FILE: .flowconfig
================================================
[ignore]
[include]
[libs]
[lints]
[options]
[strict]
================================================
FILE: .gitignore
================================================
node_modules
.cache
dist
lib
*.log
reference
.DS_Store
# editor specific files
.vscode
.package-lock.json
================================================
FILE: .npmignore
================================================
# Ignore source and reference files
src
node_modules
reference
# Ignore config files
.eslintrc
.gitignore
webpack.config.js
# Ignore doc and example file
docs
example
example_old
================================================
FILE: .prettierrc
================================================
{
"printWidth": 100,
"arrowParens": "always",
"singleQuote": true,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"bracketSpacing": true,
"jsxBracketSameLine": false,
"requirePragma": false,
"proseWrap": "preserve",
"trailingComma": "all"
}
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- "8"
script:
- echo 'Starting Build!'
- echo 'Installing Deps!'
- yarn
- echo 'Testing!'
- yarn test
- echo 'Checking Bundle Size!'
- yarn test:bundlesize
deploy:
on:
tags: true
provider: npm
email: "$EMAIL_ADDRESS"
api_key: "$AUTH_TOKEN"
================================================
FILE: CHANGELOG.md
================================================
v11.0
- Support new jsx transform.
- Children APIs
- 3rd Party React library support (Tested React-router, redux, mobx, react-query, zustand, recharts)
- Added couple of unit test for the library.
v10.0
- Concurrent mode API support
- Suspense for data fetch, Suspense.
- React Memo
v9.0
- Rewrote library with Fiber architecture.
v8.0
- SVG support
- Portals
- Context API
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at sudhanshuyadav2@gmail.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2019 Sudhanshu Yadav
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<p align="center">
<img src="https://unpkg.com/brahmos@0.5.0/brahmos.svg" alt="Brahmos.js" width="250">
</p>
# Brahmos
Supercharged JavaScript library to build user interfaces with modern React API and native templates.
Brahmos supports all the APIs of React including the upcoming concurrent mode APIs and the existing ones. It has its own custom fiber architecture and concurrent mode implementation to support the concurrent UI patterns.
## Features
- Lightweight and Fast.
- Exact same React's Declarative APIs with JSX.
- Fast alternative to Virtual DOM. (JSX without VDOM).
- Smaller transpiled footprint of your source code, than traditional JSX.
## Installation
### Create Brahmos App
Use [Create a New Brahmos App](https://www.npmjs.com/package/create-brahmos-app) if you're looking for a powerful JavaScript toolchain.
### Manual installation
Add `brahmos` as dependency. And `babel-plugin-brahmos` as dev dependency.
```
npm install brahmos
npm install babel-plugin-brahmos --save-dev
```
Add brahmos in your babel config.
```
{
presets: ['@babel/preset-env'],
plugins: [
//...
'brahmos'
]
}
```
**Note:** You will have to remove react preset from babel if you trying brahmos on existing project.
## Usage
The API is exact same as React so build how you build application with React, but instead of importing from `react` or `react-dom` import from `brahmos`;
```js
import {useState, useEffect} from 'brahmos';
export default function App(props) {
const [state, setState] = useState(0);
return (
<div>
...
</div>
)
}
```
### Using React 3rd party libraries
Just alias react and react-dom with brahmos. And you are good to go using 3rd party react libraries.
You need to add following aliases.
```js
alias: {
react: 'brahmos',
'react-dom': 'brahmos',
'react/jsx-runtime': 'brahmos'
},
```
- **webpack** ([https://webpack.js.org/configuration/resolve/#resolvealias](https://webpack.js.org/configuration/resolve/#resolvealias))
- **parcel** ([https://parceljs.org/module_resolution.html#aliases](https://parceljs.org/module_resolution.html#aliases))
- **rollup** ([https://www.npmjs.com/package/@rollup/plugin-alias](https://www.npmjs.com/package/@rollup/plugin-alias))
- **babel** ([https://www.npmjs.com/package/babel-plugin-module-resolver](https://www.npmjs.com/package/babel-plugin-module-resolver))
## Idea
It is inspired by the rendering patterns used on hyperHTML and lit-html.
It has the same declarative API like React, but instead of working with VDOM, it uses tagged template literals and HTML's template tag for faster rendering and updates.
It divides the HTML to be rendered into static and dynamic parts, and in next render, it has to compare the values of only dynamic parts and apply the changes optimally to the connected DOM.
It's unlike the VDOM which compares the whole last rendered VDOM to the new VDOM (which has both static and dynamic parts) to derive the optimal changes that are required on the actual DOM.
Even though tagged template literals are the key to static and dynamic part separation, the developer has to code on well adopted JSX.
Using the babel-plugin-brahmos it transforms JSX into tagged template literals which are optimized for render/updates and the output size.
Consider this example,
```jsx
class TodoList extends Component {
state = { todos: [], text: '' };
setText = (e) => {
this.setState({ text: e.target.value });
};
addTodo = () => {
let { todos, text } = this.state;
this.setState({
todos: todos.concat(text),
text: '',
});
};
render() {
const { todos, text } = this.state;
return (
<form className="todo-form" onSubmit={this.addTodo} action="javascript:">
<input value={text} onChange={this.setText} />
<button type="submit">Add</button>
<ul className="todo-list">
{todos.map((todo) => (
<li className="todo-item">{todo}</li>
))}
</ul>
</form>
);
}
}
```
It will be transformed to
```js
class TodoList extends Component {
state = { todos: [], text: '' };
setText = (e) => {
this.setState({ text: e.target.value });
};
addTodo = () => {
let { todos, text } = this.state;
this.setState({
todos: todos.concat(text),
text: '',
});
};
render() {
const { todos, text } = this.state;
return html`
<form class="todo-form" ${{ onSubmit: this.addTodo }} action="javascript:">
<input ${{ value: text }} ${{ onChange: this.setText }} />
<button type="submit">Add</button>
<ul class="todo-list">
${todos.map((todo) =>
html`
<li class="todo-item">${todo}</li>
`(),
)}
</ul>
</form>
`("0|0|1,0|1|0,1|3|");
}
}
```
With the tagged template literal we get a clear separating of the static and dynamic part. And on updates it needs to apply changes only on the changed dynamic parts.
Tagged template literals also have a unique property where the reference of the literal part (array of static strings) remain the same for every call of that tag with a given template.
Taking advantage of this behavior Brahmos uses literal parts as a cache key to keep the intermediate states to avoid the work done to process a template literal again.
Tagged template is natively supported by the browser, unlike the React's JSX which has to be transformed to React.createElement calls. So the output generated to run Brahmos has a smaller footprint than the output generated for the react.
For the above example, the Brahmos output is 685 bytes, compared to 824 bytes from the React output. More the static part of an HTML, greater the difference will be.
## Demo
The following demo demonstrates the support of all the APIs coming in future version of React like Concurrent mode, suspense list, suspense for data fetch, and also for the existing APIs like states, hooks, context api, refs etc.
[https://codesandbox.io/s/brahmos-demo-3t8r6](https://codesandbox.io/s/brahmos-demo-3t8r6)
## Talk on the Idea of Brahmos
<a href="https://www.youtube.com/watch?v=oYdVhIzPBr8&feature=youtu.be&ab_channel=BristolJS" target="_blank" rel="noopener">
<img src="https://unpkg.com/brahmos@0.10.0-alpha4/brahmos_talk.jpg" alt="Brahmos.js: React without VDOM"
title="Brahmos.js: React without VDOM" width="410px" />
</a>
## Slack Channel
https://join.slack.com/t/brahmoscommunity/shared_invite/enQtODM5NDMwODgwMzQyLTc4YjJlZjY3Mzk1ODJkNTRkODljYjhmM2NhMGIxNzFjMjZjODk0MmVjZTVkNmE5Y2MwYzZkMzk5NTUxYmI5OWE
## Progress
- [x] Babel Plugin to transpile JSX to tagged template
- [x] Class components with all life cycle methods (Except deprecated methods)
- [x] Functional Component
- [x] List and Keyed list
- [x] Synthetic input events - onChange support
- [x] Hooks
- [x] Context API
- [x] Refs Api, createRef, ref as callback, forwardRef
- [x] SVG Support
- [x] Suspense, Lazy, Suspense for data fetch, Suspense List
- [x] Concurrent Mode
- [x] 3rd Party React library support (Tested React-router, redux, mobx, react-query, zustand, recharts)
- [x] React Utilities and Methods
- [ ] Handle server rendering
- [ ] Performance improvement
- [ ] Bug fixes
- [ ] Test Cases
================================================
FILE: babel.config.js
================================================
module.exports = {
presets: [['@babel/preset-env']],
plugins: [
'@babel/plugin-transform-flow-strip-types',
'@babel/plugin-transform-runtime',
'@babel/plugin-proposal-class-properties',
['@babel/plugin-proposal-object-rest-spread', {}, 'rest-spread'],
'brahmos',
],
};
================================================
FILE: bundlesize.config.json
================================================
{
"files": [
{
"path": "./dist/brahmos.js",
"maxSize": "20 kB"
},
{
"path": "./dist/brahmos.min.js",
"maxSize": "7 kB"
}
]
}
================================================
FILE: docs/HOW_IT_WORKS.md
================================================
<h2> ⚠️ Warning: This document is stale, a lot has been changed since this doc was published. This need's to be updated. </h2>
This document is to explain how Brahmos work, its concept, internals and taxonomies. This is a good place for the contributors and people who want to understand the inner working of the Brahmos.
This doc tries to cover the different parts of Brahmos and explains what they do. Links to the source files are also added so you can dive deep through code and comments as well.
This doc tries to be as much as descriptive so that you can understand the internals of Brahmos. But if things are unclear and you have some ideas to improve it, please raise an issue or submit a PR.
- [Concept](#concept)
- [Brahmos Transformation (with babel-plugin-brahmos)](#brahmos-transformation-with-babel-plugin-brahmos)
- [Basic html with dynamic value](#basic-html-with-dynamic-value)
- [Html with Custom Component](#html-with-custom-component)
- [More complex transformation](#more-complex-transformation)
- [Tag function `html`](#tag-function-html)
- [createElement](#createelement)
- [Brahmos Nodes](#brahmos-nodes)
- [Brahmos Tag Node](#brahmos-tag-node)
- [Brahmos Component Node](#brahmos-component-node)
- [Brahmos Element Node](#brahmos-element-node)
- [Brahmos String Node](#brahmos-string-node)
- [Brahmos Array Node](#brahmos-array-node)
- [Brahmos node tree](#brahmos-node-tree)
- [TemplateTag](#templatetag)
- [TemplateNode](#templatenode)
- [Class Component](#class-component)
- [Functional Component](#functional-component)
- [Associating instance](#associating-instance)
- [Updater](#updater)
- [Attribute updater](#attribute-updater)
- [Node updater](#node-updater)
- [Non renderable node](#non-renderable-node)
- [Component node](#component-node)
- [Tag node & Element node](#tag-node--element-node)
- [Array nodes](#array-nodes)
- [Text nodes](#text-nodes)
- [Tear down](#tear-down)
## Concept
Brahmos is a lightweight implementation of React without VDOM. It has the same declarative API like React, but instead of working with VDOM, it uses tagged template literals and HTML's template tag for faster rendering and updates. It divides the HTML to be rendered into static and dynamic parts, and in next render, it has to compare the values of only dynamic parts and apply the changes optimally to the connected DOM. It's unlike the VDOM which compares the whole last rendered VDOM (which has both static and dynamic parts) with the new VDOM to derive the optimal changes that are required on the actual DOM.
It has the exact same API as React but the Brahmos compiler and the renderer makes this library different. Let's see how it works.
## Brahmos Transformation (with babel-plugin-brahmos)
A developer writes code in JSX and the babel-plugin-brahmos transform code to templateLiteral.
Here are example of few transformation.
#### Basic html with dynamic value
```jsx
<div className="greet">
Hello <span className="name">{name}</span> !!
</div>
```
In Brahmos this will be transformed to.
```js
html`
<div class="greet">Hello <span class="name">${name}</span> !!</div>
`;
```
Compared to React
```js
React.createElement(
'div',
{
className: 'greet',
},
'Hello ',
React.createElement(
'span',
{
className: 'name',
},
name,
),
' !!',
);
```
With the string literal, you can see there is a clear separation between static and dynamic part.
#### Html with Custom Component
```jsx
<div className="greet">
Hello <Name value={name} /> !!
</div>
```
Brahmos:
```js
html`
<div class="greet">
Hello ${createElement(Name, { value: 'name' })} !!
</div>
`;
```
React:
```js
React.createElement(
'div',
{
className: 'greet',
},
'Hello ',
React.createElement(Name, {
value: name,
}),
' !!',
);
```
- For Custom component it uses the syntax createElement similar to React as they cannot be converted to the template tag. With the first argument being a Component reference, the 2nd argument being props followed by children.
- The output of createElement of Brahmos is slightly different than the React.
- This also enables support for third-party React component to be used along with Brahmos.
#### More complex transformation
```jsx
<div className="items">
<Item>
<img className="item-img" src={itemImg} alt={itemShortDesc} />
<p>{itemDesc}</p>
<button className="add-item" onClick={this.addItem}>
Add
</button>
</Item>
</div>
```
Brahmos:
```js
html`
<div class="items">
${createElement(
Item,
{},
html`
<img class="item-img" ${{ src: itemImg, alt: itemShortDesc }} />
<p>${itemDesc}</p>
<button className="add-item" ${{ onClick: this.addItem }}>
Add
</button>
`,
)}
</div>
`;
```
React:
```js
React.createElement(
'div',
{
className: 'items',
},
React.createElement(
Item,
null,
React.createElement('img', {
className: 'item-img',
src: itemImg,
alt: itemShortDesc,
}),
React.createElement('p', null, itemDesc),
React.createElement(
'button',
{
className: 'add-item',
onClick: (void 0).addItem,
},
'Add',
),
),
);
```
- Dynamic attributes are transformed into key-value pairs while also maintaining the node reference of that dynamic attributes.
- A tagged template literal can be passed as children of createElement call. Children can be string, tagged component literal, another custom component or array of all this.
- We can also see how the overall footprint of Brahmos output is smaller than the JSX output. And bigger the static part bigger the difference will be more.
## Tag function `html`
Source: [https://github.com/s-yadav/brahmos/blob/master/src/tags.js](https://github.com/s-yadav/brahmos/blob/master/src/tags.js)
On the code transformed by Brahmos, we see the ES6 template literal with a tag.
Tags are nothing but a function which receives an array of the literal part (static part) followed by all expressions (values).
```js
function html(strings, ...values) {
// string ['<div class="greeting">\nHello <span class="name">', '</span> !!\n</div>']
// values = [name]
}
```
A tag function doesn't have to return only the string, it can return anything. The html tag function returns an object (Brahmos Tag Node) which contains TemplateTag instance (which we will see later) and an array of dynamic expressions.
Brahmos Tag Node
```js
{
template: templateTagInstance,
values: [name],
}
```
Also on a tag function, the reference of string array remains the same for a given template. We use this behaviour to cache the templateTagInstance for a given literal (static) part and reuse it for next calls.
## createElement
Source: https://github.com/s-yadav/brahmos/blob/master/src/createElement.js
createElement API is similar to react where the first argument is an element (component reference or a string), the second argument is for props followed by children.
It returns the Brahmos element node if a string is passed as the first argument and returns the Brahmos component node if component reference is passed.
Brahmos Element Node
```js
{
element: 'div',
values: [attributes, children]
}
```
Brahmos Component Node
```js
{
type: BrahmosComponent,
props: {
...allPassedProps,
children,
}
key,
ref,
}
```
Similar to React children are passed as a prop. key and ref are reserved props and are not passed to the component.
## Brahmos Nodes
Brahmos has different types of nodes which are handled and updated differently on first render or updates.
#### Brahmos Tag Node
This is returned by tagged template, which looks like
```js
{
template: templateTagInstance,
values: [...dynamicExpressions],
__$isBrahmosTag$__: true,
}
```
#### Brahmos Component Node
- Brahmos component node is further divided into `Class Component Node` and `Functional Component Node`.
- Component nodes are returned by the createElement call with custom component.
```js
{
type: BrahmosComponent,
props: {
...allPassedProps,
children,
}
key,
ref,
__$isBrahmosComponent$__: true,
__$isBrahmosClassComponent$__: true | false,
__$isBrahmosFunctionalComponent$__: true | false,
}
```
#### Brahmos Element Node
- This is returned by the createElement call with HTML elements tagName instead of custom component.
```js
{
element: 'div',
values: [attributes, children],
__$isBrahmosTag$__: true,
__$isBrahmosTagElement$__: true,
}
```
#### Brahmos String Node
- This is a simple string and is rendered as a text node.
#### Brahmos Array Node
- This is an array of the above types of nodes.
## Brahmos node tree
Based on the different types of nodes Brahmos forms a node tree. Unlike the VDOM which is a tree representation of the actual dom, Brahmos maintains a tree of Brahmos nodes. So the depth of the Brahmos node is much smaller than VDOM.
For the following JSX
```jsx
<div className="items">
<Item>
<img className="item-img" src={itemImg} alt={itemShortDesc} />
<p>{itemDesc}</p>
<button className="add-item" onClick={addItem}>
Add
</button>
</Item>
</div>
```
Brahmos tree will look like
```js
{
template: templateTagInstance, // for the outer div
values: [{
type: Item,
props: {
children: {
template: templateTagInstance, // for the Item content
values: [itemImg, itemShortDesc, itemDesc, addItem]
}
},
__$isBrahmosComponent$__: true,
}]
__$isBrahmosTag$__: true,
}
```
Compared to React VDOM tree which looks like
```js
{
type: 'div',
props: {
className: 'items',
children: [{
type: 'item',
props: {
children: [{
type: 'img' ,
props: {
className: 'item-img',
src: itemImg,
alt: itemShortDesc,
}
}, {
type: 'p',
props: {
children: [itemDesc]
},
}, {
type: 'button',
props: {
className: 'add-item',
onClick: addItem,
children: ['Add']
}
}]
}
}]
}
}
```
The Brahmos tree is then recursively analyzed to associate proper node instances and to render.
## TemplateTag
Source: https://github.com/s-yadav/brahmos/blob/master/src/TemplateTag.js
TemplateTag class has two responsibilities.
1. Create a template tag (HTML tag) for a given literal part (static part).
2. Create basic parts metadata.
For a given template
```js
html`
<div class="greeting" {{onClick: handleClick}}>Hello <span class="name">${name}</span> !!</div>
`();
```
TemplateTag Class will create a template tag which will look like
```html
<template>
<div class="greeting" data-brahmos-attr>
Hello <span class="name"><!--{{brahmos}}--></span> !!
</div>
</template>
```
It adds placeholder for attribute part and node part so parts can be processed easily later.
It will also create dynamic part metadata. For the above template this will look like
```js
[
{
tagAttrs: ['class'], //this are all other attributes other than dynamic attributes.
attrIndex: 1, // store the location of dynamic attribute part
isAttribute: true,
},
{
isNode: true,
},
];
```
- For the tag attribute, we store the index (location) of dynamic attribute so attribute can be applied in order without overriding attributes which it shouldn't.
For example
```js
html`<div id="someId" {{id: 'someOtherId'}}></div>
```
This should have `someOtherId` as id. While
```js
html`<div {{id: 'someOtherId'}} id="someId"></div>
```
This should have `someId` as id.
attrIndex helps to figure out which one to apply in such cases.
creating a template tag and part metadata is deferred until the first render of that component. This is required as some information is available during the render time only like whether a template is part of an SVG or the normal HTML.
## TemplateNode
Source: https://github.com/s-yadav/brahmos/blob/master/src/TemplateNode.js
TemplateNode class do two things
1. Create DOM nodes from the template tag removing the placeholders.
2. Create part information using placeholder location and parts metadata from the templateTagInstance.
Each of Brahmos tag node has different TemplateNode instance, but it remains the same for all consecutive renders till it has same TemplateTag instance.
If TemplateTag instance does not have template tag and part metadata created, TemplateNode initializes that on TemplateTag Instance.
TemplateNode then clones the template tag and remove place holders and creates the part information which has actual DOM references of dynamic locations.
Node which is appended to dom
```html
<div class="greeting">Hello <span class="name"></span> !!</div>
```
Part information
```js
[{
tagAttrs: ['class'],
attrIndex: 1,
isAttribute: true,
node: Element, //div.greeting
}, {
isNode: true,
parentNode: Element //span.name
previousSibling: null, //null because there is no previousSibling of the dynamic part
nextSibling: null, // null because there is no nextSibling of the the dynamic part
}]
```
Now with this part information, dynamic parts can be updated directly as now we know the actual DOM locations for those dynamic parts.
On creation of TemplateNode instance, it attaches this instance to Brahmos tag node so it can be used later.
```js
{
template: templateTagInstance,
values: [...dynamicExpressions],
templateNode: templateNodeInstance,
__$isBrahmosTag$__: true,
}
```
## Class Component
Source: https://github.com/s-yadav/brahmos/blob/master/src/Component.js
Class Component API is exactly the same as the React. There are few implementation changes though from the React.
- The deprecated life cycle methods are not supported. Even unsafe life cycle methods are not supported.
- setState calls batch all the state change and are always asynchronous.
Class Component keeps the last rendered node information so on next render it can associate proper instance to each of Brahmos Node.
During the render, the updater creates ComponentInstance and attaches it to the Brahmos component node.
```js
{
type: Component,
props: {...}
componentInstance: classComponentInstance,
}
```
## Functional Component
Source: https://github.com/s-yadav/brahmos/blob/master/src/functionalComponentInstance.js
Functional Component is written the same way as React,
While rendering Brahmos creates an instance of a functional component and associate the instance to Brahmos Component node.
```js
{
type: Component,
props: {...}
componentInstance: functionalComponentInstance,
}
```
## Associating instance
Source: https://github.com/s-yadav/brahmos/blob/master/src/associateInstance.js
This is key to making optimal updates. On rerender of a Brahmos node, the associateInstance method associate already created templateNodeInstance, or componentInstance to the new node, so it gets the reference of dynamic parts on the actual dom node.
If a node does not get an associated instance it means it is a new node and old node needs to be removed and the new one should get added.
The instance association to the new node happens with following rules.
- If the new node and old node at a specific tree path are different types, then return without associating anything.
- If the new node is a Brahmos tag node, and the templateTag instance of new node and old node is same then associate the templateNode instance to the new node. (If the literal part of a template is same, the templateTag instance will always remain same)
- If the new node is a Brahmos component node and the node.type matches with oldNode.type then it associates component instance form the old node to the new node.
- If the new node is Brahmos element node, and the element tagName matches with the oldNode's tagName then it associates templateNode instance to the new node.
- If the new node is an array, each of the nodes in that array is matched with the item in the old node having the same index or the same key. And if they match based on the above condition instance are associated with the node.
## Updater
Source: https://github.com/s-yadav/brahmos/blob/master/src/updater.js
An updater is a place where all rendering or updates happens. It recursively updates all the Brahmos node on the tree. There are three main arguments of an updater.
- parts, which is an array of dynamic part and have information about DOM location and type of part (attribute or node).
- values, which is an array of dynamic values.
- oldValues, an array of old values against which the updater can compare and only if there is a change in value apply the changes to the DOM.
There are different types of updates with two categories.
- Attribute updater
- Node updater
Apart from calling proper updater it takes care of two more thing
- Merge all dynamic attribute for a dom node, so it can be effectively updated.
- Set proper ref if ref prop is passed to an element.
### Attribute updater
Source: https://github.com/s-yadav/brahmos/blob/master/src/updateAttribute.js
- Attribute updater takes care of updating the attribute of a given node based on the index of that attribute. This information comes from the part object.
- It handles dom node property and attributes differently.
- For event properties, it takes care of removing old event listeners (if the eventListener is changed) and add new event listeners.
- To be React compatible it has synthetic events only for inputs. It has the same onChange API as react. https://github.com/s-yadav/brahmos/blob/master/src/reactEvents.js
- For inputs, it takes care of controlled and uncontrolled input similar to React. https://github.com/s-yadav/brahmos/blob/master/src/reactEvents.js
### Node updater
Source: https://github.com/s-yadav/brahmos/blob/master/src/updateNode.js
Node updater handles rendering and updates of different type of Brahmos node.
#### Non renderable node
For non-renderable values like `null`, `undefined`, `false`, it bails out and
remove the existing old node if present on that location.
#### Component node
Source: https://github.com/s-yadav/brahmos/blob/master/src/updateComponentNode.js
`updateComponentNode` handles updating a component node. It creates a component instance and associates the instance to the component node if it's not already created.
For class components
- it calls all the applicable life cycle methods if provided and renders with the error boundaries.
- It applies and flushes all the uncommitted state if present for that component.
- It also takes care or providing proper context to a component and merge contextValue provided by the ContextProvider for the component nodes down the tree.
- It sets a proper component reference to ref prop.
For functional component
- It takes care of calling effects after the render and clean the effects before the next render.
#### Tag node & Element node
Source: https://github.com/s-yadav/brahmos/blob/master/src/updateNode.js#L135
- It creates a TemplateNode instance and associates it with Brahmos tag node if it's not already created.
- For the element node, it creates an object similar to templateNode (if not created already) and associates it to the node. https://github.com/s-yadav/brahmos/blob/master/src/TagNode.js
- For the first render, it adds everything on a document fragment and adds it to DOM at the end to avoid multiple reflows.
#### Array nodes
Source: https://github.com/s-yadav/brahmos/blob/master/src/updateNode.js#L91
- Array's are optimally updated based on provided keys. It reuses the same DOM element even if the order changes (if proper keys are provided).
- It takes care of optimally removing unused old nodes, reordering of nodes and adding new nodes.
#### Text nodes
Source: https://github.com/s-yadav/brahmos/blob/master/src/updateNode.js#L23
- For text nodes, it finds the existing text node at the DOM tree path and only updates the text value avoiding creating new text node.
## Tear down
Source: https://github.com/s-yadav/brahmos/blob/master/src/tearDown.js
Tear down is a way to recursively delete a path from a given node on the Brahmos tree. It takes care of the following things.
- Unmount the components and call life cycle methods for the class component.
- Clean the effects on a functional component.
- Unset the refs.
- Delete the dom nodes.
================================================
FILE: example/App.js
================================================
import { useState, useEffect, useMemo } from 'brahmos';
import { Switch, Route, NavLink, useLocation } from 'react-router-dom';
import { BrahmosLogo, GithubLogo } from './Logos';
import TodoList from './todo-list';
import ConcurrentModeDemo from './concurrent-mode';
import SuspenseListDemo from './suspense-list';
import UseDeferredValueDemo from './use-deferred-value';
import UseDeferredValueSuspenseDemo from './use-deferred-value-suspense';
import LazyComponentDemo from './lazy-component';
import PortalDemo from './portals';
import ErrorBoundariesDemo from './error-boundaries';
import SVGDemo from './svg-chart';
import HooksDemo from './hooks';
import ContextDemo from './context-api';
import RechartExample from './third-party-component';
import ReduxExample from './food-app/redux';
import MobxExample from './food-app/mobx';
import ReactQueryExample from './food-app/react-query';
import './App.scss';
const examples = [
{
title: 'TODO List',
id: 'todo-list',
Component: TodoList,
},
{
title: 'Context API',
id: 'context-api',
Component: ContextDemo,
},
{
title: 'Hooks Demo',
id: 'hooks',
Component: HooksDemo,
},
{
title: 'Error Boundaries Demo',
id: 'error-boundaries',
Component: ErrorBoundariesDemo,
},
{
title: 'SVG Support Demo',
id: 'svg-support',
Component: SVGDemo,
},
{
title: 'Portal Demo',
id: 'portals',
Component: PortalDemo,
},
{
title: 'Concurrent Mode Demo',
id: 'concurrent-mode',
Component: ConcurrentModeDemo,
},
{
title: 'Suspense List Demo',
id: 'suspense-list',
Component: SuspenseListDemo,
},
{
title: 'Suspense with useDeferredValue',
id: 'use-deferred-value-suspense',
Component: UseDeferredValueSuspenseDemo,
},
{
title: 'Time slicing with useDeferredValue',
id: 'use-deferred-value',
Component: UseDeferredValueDemo,
},
{
title: 'Lazy Component Demo',
id: 'lazy-component',
Component: LazyComponentDemo,
},
{
title: 'Third Party React Component',
id: 'third-party-component',
Component: RechartExample,
},
{
title: 'Redux Demo',
id: 'redux',
Component: ReduxExample,
},
{
title: 'Mobx Demo',
id: 'mobx',
Component: MobxExample,
},
{
title: 'React Query and Zustand Demo',
id: 'rq-zustand',
Component: ReactQueryExample,
},
];
export default function App() {
const { pathname } = useLocation();
const title = useMemo(() => {
const pathWithoutHash = pathname.substr(1);
const currentSelected = examples.find((obj) => obj.id === pathWithoutHash);
return currentSelected ? currentSelected.title : examples[0].title;
}, [pathname]);
return (
<div className="app-container">
<header class="hero is-primary">
<div class="hero-body">
<a href="https://github.com/brahmosjs/brahmos" target="_blank" rel="noopener">
<div className="logo">
<BrahmosLogo class="brahmos-logo" />
<GithubLogo class="github-logo" />
</div>
</a>
<div>
<h1 class="title">
Brahmos Demo{' '}
<iframe
src="https://ghbtns.com/github-btn.html?user=brahmosjs&repo=brahmos&type=fork&count=false&size=large"
frameborder="0"
scrolling="0"
width="170"
height="30"
className="star-btn"
title="GitHub"
></iframe>
</h1>
<h2 class="subtitle">
Brahmos is a Super charged UI library with exact same declarative APIs of React which
uses native templates to separate static and dynamic parts of an application for
faster updates.
</h2>
</div>
</div>
</header>
<div className="body row">
<aside className="menu has-background-light column is-one-quarter">
<nav className="menu-list">
<ul>
{examples.map((example) => {
const { title, id } = example;
return (
<li className="menu-list-item" key={id}>
<NavLink to={`/${id}`} activeClassName="is-active">
{title}
</NavLink>
</li>
);
})}
</ul>
</nav>
</aside>
<div className="example-container content column">
<h2>{title}</h2>
<Switch>
<Route key={'/'} exact path={`/`} component={examples[0].Component} />
{examples.map(({ id, Component }) => {
return (
<Route key={id} path={`/${id}`}>
<Component />
</Route>
);
})}
</Switch>
</div>
</div>
</div>
);
}
================================================
FILE: example/App.scss
================================================
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
/** Colors **/
$brahmos-color-1: #efdc4f;
$brahmos-color-2: #323330;
$primary: $brahmos-color-2;
// $primary-invert: #efdc4f;
$primary-light: white;
$text: $brahmos-color-2;
$link: #2060c3;
$menu-item-active-background-color: $brahmos-color-1;
$menu-item-active-color: $brahmos-color-2;
$family-sans-serif: 'Nunito', sans-serif;
// $background: #02030e;
@import '../node_modules/bulma/bulma.sass';
.app-container {
min-height: 100vh;
display: flex;
flex-direction: column;
.hero-body {
display: flex;
align-items: center;
padding: 1.5rem;
}
.star-btn {
vertical-align: middle;
margin-left: 2rem;
}
.brahmos-logo,
.github-logo {
transition: all ease 400ms;
}
.brahmos-logo {
width: 100px;
height: 100px;
top: 0;
left: 0;
position: absolute;
}
.github-logo {
width: 60px;
height: 60px;
left: 50%;
top: 150%;
transform: translate(-50%, -50%);
position: absolute;
}
.logo {
margin-right: 1rem;
min-width: 100px;
height: 100px;
border-radius: 50%;
background: $brahmos-color-1;
overflow: hidden;
position: relative;
cursor: pointer;
&:hover {
.brahmos-logo {
top: -100%;
}
.github-logo {
top: 50%;
}
}
}
.body {
display: flex;
flex: 1;
}
.menu-list a:not(.is-active) {
border-bottom: 1px solid $border;
}
.small-width {
width: 300px;
}
.control-wrap {
display: flex;
align-items: center;
}
.example-container {
padding-bottom: 100px;
position: relative;
}
.react-credit {
background: white;
position: fixed;
padding: 1rem 0.75rem;
border-top: 1px solid $border;
bottom: 0;
left: 25%;
width: 75%;
}
}
================================================
FILE: example/Logos.js
================================================
import Brahmos from 'brahmos';
export function GithubLogo(props) {
return (
<svg viewBox="0 0 478.613 478.613" {...props}>
<path
fill="#323330"
d="M427.501 200.695c1.776-11.238 2.884-23.56 3.163-37.377-.107-59.246-28.468-80.21-33.925-90.038 8.037-44.89-1.331-65.309-5.688-72.299-16.07-5.704-55.91 14.722-77.678 29.101-35.491-10.389-110.494-9.375-138.621 2.689C122.856-4.389 95.408 1.277 95.408 1.277s-17.745 31.82-4.691 78.371c-17.075 21.759-29.802 37.143-29.802 77.949 0 9.773.607 19.008 1.637 27.893 14.705 77.318 75.97 110.674 136.15 116.426-9.056 6.881-19.928 19.903-21.432 34.992-11.379 7.357-34.268 9.789-52.067 4.193-24.939-7.88-34.486-57.266-71.833-50.221-8.081 1.512-6.475 6.842.523 11.386 11.378 7.38 22.094 16.554 30.354 36.185 6.344 15.072 19.687 41.982 61.873 41.982 16.747 0 28.477-1.979 28.477-1.979s.319 38.406.319 53.385c0 17.238-23.264 22.078-23.264 30.348 0 3.289 7.7 3.601 13.888 3.601 12.229 0 37.673-10.186 37.673-28.103 0-14.237.227-62.081.227-70.46 0-18.307 9.811-24.136 9.811-24.136s1.201 97.727-2.361 110.829c-4.177 15.408-11.744 13.219-11.744 20.076 0 10.233 30.589 2.502 40.735-19.897 7.849-17.495 4.334-113.331 4.334-113.331l8.183-.178s.094 43.892-.188 63.944c-.295 20.769-2.438 47.025 9.898 59.417 8.097 8.15 32.903 22.451 32.903 9.382 0-7.574-17.371-13.833-17.371-34.353V344.45c10.553 0 12.734 31.072 12.734 31.072l3.804 57.727s-2.526 21.065 22.756 29.856c8.925 3.126 28.018 3.976 28.913-1.271.897-5.26-22.99-13.038-23.217-29.342-.123-9.93.445-15.742.445-58.934 0-43.168-5.799-59.137-26.007-71.863 58.601-6.014 119.468-32.185 130.433-101z"
/>
</svg>
);
}
export function BrahmosLogo(props) {
return (
<svg viewBox="0 0 640 640" {...props}>
<defs>
<path
d="M622.35 318.15c0 165.58-134.42 300-300 300-165.57 0-300-134.42-300-300 0-165.57 134.43-300 300-300 165.58 0 300 134.43 300 300z"
id="prefix__a"
/>
<path d="M286.24 574.54v-79.68" id="prefix__b" />
<path
d="M384.88 166.01L322.4 61.77l-62.57 104.24V339.4l-62.48 77.11v125.26l62.48-62.63h125.05l62.47 62.63V416.51l-62.47-77.11V166.01z"
id="prefix__c"
/>
<path d="M358.46 574.54v-79.68" id="prefix__d" />
<path d="M322.35 562.82v-70.34" id="prefix__e" />
</defs>
<use xlinkHref="#prefix__a" fill="#f0da51" />
<use xlinkHref="#prefix__b" fill="#323330" />
<use xlinkHref="#prefix__b" fillOpacity={0} stroke="#323330" strokeWidth={6} />
<use xlinkHref="#prefix__c" fill="#323330" />
<use xlinkHref="#prefix__c" fillOpacity={0} stroke="#323330" />
<use xlinkHref="#prefix__d" fill="#323330" />
<use xlinkHref="#prefix__d" fillOpacity={0} stroke="#323330" strokeWidth={6} />
<g>
<use xlinkHref="#prefix__e" fill="#323330" />
<use xlinkHref="#prefix__e" fillOpacity={0} stroke="#323330" strokeWidth={6} />
</g>
</svg>
);
}
================================================
FILE: example/common/ReactCredit.js
================================================
export default function ReactCredit({ name, link }) {
return (
<p className="react-credit">
This demo is forked from {name} demo of React:
<br />
<strong>Source: </strong>
<a href={link} target="_blank" rel="noopener">
{link}
</a>
</p>
);
}
================================================
FILE: example/concurrent-mode/fakeApi.js
================================================
export function fetchProfileData(userId) {
const userPromise = fetchUser(userId);
const postsPromise = fetchPosts(userId);
return {
userId,
user: wrapPromise(userPromise),
posts: wrapPromise(postsPromise),
};
}
// Suspense integrations like Relay implement
// a contract like this to integrate with React.
// Real implementations can be significantly more complex.
// Don't copy-paste this into your project!
function wrapPromise(promise) {
let status = 'pending';
let result;
const suspender = promise.then(
(r) => {
status = 'success';
result = r;
},
(e) => {
status = 'error';
result = e;
},
);
return {
read() {
if (status === 'pending') {
throw suspender;
} else if (status === 'error') {
throw result;
} else if (status === 'success') {
return result;
}
},
};
}
export function fetchUser(userId) {
console.log('fetch user ' + userId + '...');
return new Promise((resolve) => {
setTimeout(() => {
console.log('fetched user ' + userId);
switch (userId) {
case 0:
resolve({
name: 'Ringo Starr',
});
break;
case 1:
resolve({
name: 'George Harrison',
});
break;
case 2:
resolve({
name: 'John Lennon',
});
break;
case 3:
resolve({
name: 'Paul McCartney',
});
break;
default:
throw Error('Unknown user.');
}
}, 1000 * Math.random());
});
}
export function fetchPosts(userId) {
console.log('fetch posts for ' + userId + '...');
return new Promise((resolve) => {
setTimeout(() => {
console.log('fetched posts for ' + userId);
switch (userId) {
case 0:
resolve([
{
id: 0,
text: 'I get by with a little help from my friends',
},
{
id: 1,
text: "I'd like to be under the sea in an octupus's garden",
},
{
id: 2,
text: 'You got that sand all over your feet',
},
]);
break;
case 1:
resolve([
{
id: 0,
text: 'Turn off your mind, relax, and float downstream',
},
{
id: 1,
text: 'All things must pass',
},
{
id: 2,
text: "I look at the world and I notice it's turning",
},
]);
break;
case 2:
resolve([
{
id: 0,
text: 'Living is easy with eyes closed',
},
{
id: 1,
text: "Nothing's gonna change my world",
},
{
id: 2,
text: 'I am the walrus',
},
]);
break;
case 3:
resolve([
{
id: 0,
text: 'Woke up, fell out of bed',
},
{
id: 1,
text: 'Here, there, and everywhere',
},
{
id: 2,
text: 'Two of us sending postcards, writing letters',
},
]);
break;
default:
throw Error('Unknown user.');
}
}, 2000 * Math.random());
});
}
================================================
FILE: example/concurrent-mode/index.js
================================================
/**
* Forked from: https://codesandbox.io/s/jovial-lalande-26yep?file=/src/index.js:0-1646
*/
import Brahmos, { useState, useTransition, Suspense } from 'brahmos';
import ReactCredit from '../common/ReactCredit';
import { fetchProfileData } from './fakeApi';
function getNextId(id) {
return id === 3 ? 0 : id + 1;
}
const initialResource = fetchProfileData(0);
function ProfileDetails({ resource }) {
const user = resource.user.read();
return <h1>{user.name}</h1>;
}
function ProfileTimeline({ resource }) {
const posts = resource.posts.read();
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.text}</li>
))}
</ul>
);
}
function ProfilePageWithoutTransition() {
const [resource, setResource] = useState(initialResource);
return (
<div>
<hr />
<h3>Example of suspense for data fetching.</h3>
<p>
As soon as we click the button the view will go on receded state (shows loader), and as soon
as partial data (skeleton or required data) is available it will starts showing partial
data, and then show the complete data lazily.
<br />
<strong>Click Next to see the behaviour</strong>
</p>
<div style={{ minHeight: 210 }}>
<div className="control-wrap">
<button
className="button is-primary"
onClick={() => {
const nextUserId = getNextId(resource.userId);
setResource(fetchProfileData(nextUserId));
}}
>
Next
</button>
</div>
<Suspense fallback={<h1>Loading profile...</h1>}>
<ProfileDetails resource={resource} />
<Suspense fallback={<h1>Loading posts...</h1>}>
<ProfileTimeline resource={resource} />
</Suspense>
</Suspense>
</div>
</div>
);
}
function ProfilePageWithTransition() {
const [resource, setResource] = useState(initialResource);
const [startTransition, isPending] = useTransition({
timeoutMs: 3000,
});
return (
<div>
<hr />
<h3>Example of transition.</h3>
<p>
Preferably, we should remain on the same screen with pending state until we have partial
data (skeleton or required data).
<br />
<strong>Click Next to see the behaviour</strong>
</p>
<div style={{ minHeight: 210 }}>
<div className="control-wrap">
<button
className="button is-primary"
disabled={isPending}
onClick={() => {
startTransition(() => {
const nextUserId = getNextId(resource.userId);
setResource(fetchProfileData(nextUserId));
});
}}
>
Next
</button>
{isPending ? ' Loading...' : null}
</div>
<Suspense fallback={<h1>Loading profile...</h1>}>
<ProfileDetails resource={resource} />
<Suspense fallback={<h1>Loading posts...</h1>}>
<ProfileTimeline resource={resource} />
</Suspense>
</Suspense>
</div>
</div>
);
}
function ProfilePageWithTransitionPreferred() {
const [resource, setResource] = useState(initialResource);
const [startTransition, isPending] = useTransition({
timeoutMs: 3000,
});
return (
<div>
<hr />
<h3>Another example of transition.</h3>
<p>
We can also wait in pending state until complete data is available for next page.
<br />
<strong>Click Next to see the behaviour</strong>
</p>
<div style={{ minHeight: 210 }}>
<div className="control-wrap">
<button
className="button is-primary"
disabled={isPending}
onClick={() => {
startTransition(() => {
const nextUserId = getNextId(resource.userId);
setResource(fetchProfileData(nextUserId));
});
}}
>
Next
</button>
{isPending ? ' Loading...' : null}
</div>
<Suspense fallback={<h1>Loading profile...</h1>}>
<ProfileDetails resource={resource} />
</Suspense>
<Suspense fallback={<h1>Loading posts...</h1>}>
<ProfileTimeline resource={resource} />
</Suspense>
</div>
</div>
);
}
export default function App() {
return (
<>
<p>
This demo demonstrates concurrent mode patterns in Brahmos.
<br />
It demonstrates Suspense for data fetch (Render as you fetch), Transitions and preferred
rendering approach (Pending -> Skeleton -> Complete). Read more about it in official React
Docs.
<a
href="https://reactjs.org/docs/concurrent-mode-patterns.html"
target="_blank"
rel="noopener"
>
https://reactjs.org/docs/concurrent-mode-patterns.html
</a>
<br />
<br />
On this demo APIs are mocked. Profile detail API responds between 0 - 1000ms and Post API
responds between 0 - 2000ms
</p>
<ProfilePageWithoutTransition />
<ProfilePageWithTransition />
<ProfilePageWithTransitionPreferred />
<ReactCredit name="Concurrent Mode" link="https://codesandbox.io/s/jovial-lalande-26yep" />
</>
);
}
================================================
FILE: example/context-api/index.js
================================================
import Brahmos, { Component, createContext, useContext, useState } from 'brahmos';
const BrahmosContext = createContext('Brahmos');
// context as static property
class ContextStaticProperty extends Component {
render() {
const name = this.context;
return <div>Hello {name}</div>;
}
}
ContextStaticProperty.contextType = BrahmosContext;
function ContextConsumer() {
return <BrahmosContext.Consumer>{(name) => <div>Hello {name}</div>}</BrahmosContext.Consumer>;
}
function UseContext() {
const name = useContext(BrahmosContext);
return <div>Hello {name}</div>;
}
export default function ContextExample() {
const [name, setName] = useState();
return (
<div>
<p> This demo demonstrates usage of Context API in different way</p>
<input className="input small-width" value={name} onChange={(e) => setName(e.target.value)} />
<BrahmosContext.Provider value={name}>
<h3>ContextConsumer</h3>
<ContextConsumer />
<h3>Context Static Property</h3>
<ContextStaticProperty />
<h3>useContext Hook</h3>
<UseContext />
</BrahmosContext.Provider>
<>
<h3>ContextConsumer without Provider</h3>
<ContextConsumer />
<h3>useContext without Provider</h3>
<UseContext />
</>
</div>
);
}
================================================
FILE: example/error-boundaries/index.js
================================================
import Brahmos, { Component } from 'brahmos';
import ReactCredit from '../common/ReactCredit';
// Forked from: https://codepen.io/gaearon/pen/wqvxGa
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { error: null, errorInfo: null };
}
static getDerivedStateFromError(error) {
return { error };
}
// eslint-disable-next-line handle-callback-err
componentDidCatch(error, errorInfo) {
// Catch errors in any components below and re-render with error message
this.setState({
errorInfo: errorInfo,
});
// You can also log error messages to an error reporting service here
}
render() {
if (this.state.error) {
// Error path
return (
<div>
<h2>Something went wrong.</h2>
<details style={{ whiteSpace: 'pre-wrap' }}>
{this.state.error && this.state.error.toString()}
<br />
{this.state.errorInfo && this.state.errorInfo.componentStack}
</details>
</div>
);
}
// Normally, just render children
return this.props.children;
}
}
class BuggyCounter extends Brahmos.Component {
constructor(props) {
super(props);
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(({ counter }) => ({
counter: counter + 1,
}));
}
render() {
if (this.state.counter === 5) {
// Simulate a JS error
throw new Error('I crashed!');
}
return (
<div>
<button className="button" onClick={this.handleClick}>
{this.state.counter}
</button>
<br />
<br />
</div>
);
}
}
export default function ErrorBoundaryExample() {
return (
<div>
<p>
<b>
Click on the numbers to increase the counters.
<br />
The counter is programmed to throw when it reaches 5. This simulates a JavaScript error in
a component.
</b>
</p>
<hr />
<ErrorBoundary>
<p>
These two counters are inside the same error boundary. If one crashes, the error boundary
will replace both of them.
</p>
<BuggyCounter />
<BuggyCounter />
</ErrorBoundary>
<hr />
<p>
These two counters are each inside of their own error boundary. So if one crashes, the other
is not affected.
</p>
<ErrorBoundary>
<BuggyCounter />
</ErrorBoundary>
<ErrorBoundary>
<BuggyCounter />
</ErrorBoundary>
<ReactCredit name="Error boundaries" link="https://codepen.io/gaearon/pen/wqvxGa" />
</div>
);
}
================================================
FILE: example/food-app/food-app.css
================================================
.food-app {
position: relative;
display: flex;
flex-direction: column;
gap: 40px;
text-align: center;
padding-top: 20px;
padding-bottom: 120px;
width: 600px;
min-height: 400px;
background-color: #fffaf0;
}
.food-app > header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.food-app > footer {
position: absolute;
bottom: 0;
padding: 30px 20px;
width: 100%;
}
.veg-filter {
margin-right: 5px;
}
.menu-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.menu-item {
display: flex;
gap: 10px;
justify-content: space-between;
align-items: center;
padding: 0 20px;
text-align: left;
}
.menu-item-title {
display: flex;
gap: 5px;
}
.menu-item-description {
color: #555;
font-size: 14px;
margin-top: 5px;
}
.menu-btn-add {
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
background-color: transparent;
border: 1px solid #cbd5e0;
border-radius: 4px;
padding: 5px 15px;
font-size: 14px;
}
.menu-btn-group {
display: flex;
border: 1px solid #718096;
border-radius: 4px;
}
.menu-btn-item {
background-color: transparent;
border: none;
font-size: 14px;
}
.menu-item-qty {
font-size: 14px;
display: flex;
align-items: center;
padding: 5px 0;
user-select: none;
}
.food-app-pay-btn {
display: block;
text-decoration: none;
width: 100%;
font-size: 20px;
border: none;
background-color: #ecc94b;
color: #2d3748;
padding: 20px 0;
border-radius: 6px;
font-weight: medium;
}
.icon-plus,
.icon-minus {
display: block;
}
================================================
FILE: example/food-app/food-menu.json
================================================
[
{
"id": "SN",
"label": "Schezwan Noodles",
"diet": "veg",
"description": "Spicy Noodles soaked in Schezwan sauce and topped with exotic herbs",
"price": 8
},
{
"id": "SM",
"label": "Sausage McMuffin",
"description": "Lightly seasoned sausage patty and cheese slice on a hot toasted English muffin.",
"price": 12
},
{
"id": "MP",
"label": "Mushroom Pizza",
"diet": "veg",
"description": "Loaded with 2 types of cheese and garlic herb sautéed mushrooms!! ",
"price": 20
},
{
"id": "CF",
"label": "Chicken Foldover Spicy",
"description": "Two succulent chicken patties, add some crisp lettuce.",
"price": 10
},
{
"id": "FF",
"label": "French Fries",
"diet": "veg",
"description": "Crispy golden fries with a pinch of salt.",
"price": 6
},
{
"id": "BQ",
"label": "BBQ Double Burger",
"description": "Beef patties with a slice of cheese, shredded lettuce, tomato and onions",
"price": 16
}
]
================================================
FILE: example/food-app/mobx/App.js
================================================
import { Fragment, useEffect, useState } from 'brahmos';
import { observer } from 'mobx-react-lite';
import { useRootStore } from './mobx';
import { MenuList, Message, PaymentFooter } from './Comps';
import { loadFoodData } from '../utils';
const App = observer(function App() {
const rootStore = useRootStore();
const stateAPIStatus = useLoadFoodData();
function handleVegToggle() {
rootStore.changeDiet();
}
return (
<div className="food-app">
<header>
<h1>Ordux</h1>
<label>
<input
type="checkbox"
className="veg-filter"
name="veg-checkbox"
value={rootStore.diet}
checked={rootStore.diet === 'veg'}
onChange={handleVegToggle}
/>
Veg Only
</label>
</header>
<Message status={stateAPIStatus} />
{stateAPIStatus === 'success' && (
<Fragment>
<main>
<MenuList />
</main>
<PaymentFooter />
</Fragment>
)}
</div>
);
});
function useLoadFoodData() {
const [stateAPIStatus, setAPIStatus] = useState('idle');
const rootStore = useRootStore();
useEffect(() => {
setAPIStatus('loading');
loadFoodData()
.then((data) => {
rootStore.loadMenu(data);
setAPIStatus('success');
})
.catch((error) => {
setAPIStatus('error');
});
}, [rootStore]);
return stateAPIStatus;
}
export default App;
================================================
FILE: example/food-app/mobx/Comps.js
================================================
import { observer } from 'mobx-react-lite';
import { useRootStore } from './mobx';
export const MenuItem = observer(function MenuItem(props) {
const { item } = props;
const { quantity } = item;
const rootStore = useRootStore();
function handleIncrement() {
rootStore.addToCart(item);
}
function handleDecrement() {
rootStore.removeFromCart(item);
}
const addBtn = (
<button
aria-label={`Add ${item.label} to cart`}
className="menu-btn-add"
onClick={handleIncrement}
>
Add <IconPlus />
</button>
);
const increaseBtn = (
<button
aria-label={`Add ${item.label} to cart`}
className="menu-btn-item"
onClick={handleIncrement}
>
<IconPlus />
</button>
);
const decreaseBtn = (
<button
aria-label={`Remove ${item.label} from cart`}
className="menu-btn-item"
onClick={handleDecrement}
>
<IconMinus />
</button>
);
const qtyIndicator = (
<div className="menu-item-qty" role="status" aria-live="polite">
{quantity}
</div>
);
return (
<li className="menu-item">
<div>
<div className="menu-item-title">
<h4>{item.label}</h4>
<span>(${item.price})</span>
</div>
<p className="menu-item-description">{item.description}</p>
</div>
{quantity === 0 ? (
addBtn
) : (
<div className="menu-btn-group">
{decreaseBtn}
{qtyIndicator}
{increaseBtn}
</div>
)}
</li>
);
});
export const MenuList = observer(function MenuList() {
const rootStore = useRootStore();
const { menuList } = rootStore;
return (
<ul className="menu-list">
{menuList.map((item) => (
<MenuItem key={item.id} item={item} />
))}
</ul>
);
});
export function Message(props) {
const { status } = props;
const messages = {
loading: 'Loading...',
error: (
<>
Menu failed to load.
<br />
Please try again...
</>
),
};
const messageText = messages[status];
if (!messageText) {
return null;
}
return (
<div
className={`message-${status}`}
role={status === 'error' ? 'alert' : 'status'}
aria-live="polite"
aria-busy={status === 'loading'}
>
{messageText}
</div>
);
}
export const PaymentFooter = observer(function PaymentFooter() {
const rootStore = useRootStore();
const { cartPrice } = rootStore;
return (
<footer>
{cartPrice > 0 && (
<a
href="#payment"
onClick={(e) => e.preventDefault()}
className="food-app-pay-btn"
aria-live="polite"
>
Pay for food (${cartPrice})
</a>
)}
</footer>
);
});
// source- https://feathericons.com/
export function IconPlus() {
return (
<svg
className="icon-plus"
viewBox="0 0 24 24"
width="1em"
height="1em"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
focusable="false"
>
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
);
}
// source- https://feathericons.com/
export function IconMinus() {
return (
<svg
className="icon-minus"
viewBox="0 0 24 24"
width="1em"
height="1em"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
focusable="false"
>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
);
}
================================================
FILE: example/food-app/mobx/index.js
================================================
import { StrictMode } from 'brahmos';
import App from './App';
import { RootStore, RootStoreProvider } from './mobx';
import '../food-app.css';
export default function ReduxExample() {
return (
<StrictMode>
<p>
This demo demonstrates Brahmos compatibility with Mobx.
<br />
The example is forked from{' '}
<a
href="https://github.com/itaditya/redux-hooks-for-food-delivery/tree/aditya-redux-to-mobx"
target="_blank"
>
https://github.com/itaditya/redux-hooks-for-food-delivery/tree/aditya-redux-to-mobx
</a>
</p>
<RootStoreProvider value={new RootStore()}>
<App />
</RootStoreProvider>
</StrictMode>
);
}
================================================
FILE: example/food-app/mobx/mobx.js
================================================
import { createContext, useContext, useEffect } from 'brahmos';
import { makeAutoObservable, toJS } from 'mobx';
export class RootStore {
diet = 'all';
menu = [];
constructor() {
makeAutoObservable(this);
}
changeDiet() {
const newDiet = this.diet === 'veg' ? 'all' : 'veg';
this.diet = newDiet;
}
loadMenu(menuList) {
const menu = menuList.map((item) => {
return {
...item,
quantity: 0,
};
});
this.menu = menu;
}
addToCart(item) {
item.quantity += 1;
}
removeFromCart(item) {
if (item.quantity !== 0) {
item.quantity -= 1;
}
}
get menuList() {
if (this.diet === 'all') {
return this.menu;
}
return this.menu.filter((item) => item.diet === this.diet);
}
get cartPrice() {
let total = 0;
this.menuList.forEach((item) => {
total += item.price * item.quantity;
});
return total;
}
}
const RootStoreContext = createContext();
export const RootStoreProvider = RootStoreContext.Provider;
export const RootStoreConsumer = RootStoreContext.Consumer;
export function useRootStore() {
const rootStore = useContext(RootStoreContext);
if (rootStore === undefined) {
throw new Error('useRootStore must be used within a RootStoreProvider');
}
useEffect(() => {
if (process.env.NODE_ENV === 'development' && !window.mobx) {
window.mobx = {
rootStore,
toJS,
};
}
}, [rootStore]);
return rootStore;
}
================================================
FILE: example/food-app/react-query/App.js
================================================
import { Fragment } from 'brahmos';
import { useDietStore } from './zustand';
import { MenuList, Message, PaymentFooter } from './Comps';
import { useLoadFoodQuery, useMenuList } from './hooks';
export default function App() {
const { diet, changeDiet } = useDietStore();
const menuQuery = useLoadFoodQuery();
const menuList = useMenuList();
const stateAPIStatus = menuQuery.status;
function handleVegToggle() {
changeDiet();
}
return (
<div className="food-app">
<header>
<h1>Ordux</h1>
<label>
<input
type="checkbox"
className="veg-filter"
name="veg-checkbox"
value={diet}
checked={diet === 'veg'}
onChange={handleVegToggle}
/>
Veg Only
</label>
</header>
<Message status={stateAPIStatus} />
{stateAPIStatus === 'success' && (
<Fragment>
<main>
<MenuList menuList={menuList} />
</main>
<PaymentFooter />
</Fragment>
)}
</div>
);
}
================================================
FILE: example/food-app/react-query/Comps.js
================================================
import Brahmos from 'brahmos';
import { useCartStore } from './zustand';
import { useCartPrice } from './hooks';
export function MenuItem(props) {
const { item } = props;
const { cartByIds, addToCart, removeFromCart } = useCartStore();
const quantity = cartByIds[item.id]?.quantity ?? 0;
function handleIncrement() {
addToCart(item.id);
}
function handleDecrement() {
removeFromCart(item.id);
}
const addBtn = (
<button
aria-label={`Add ${item.label} to cart`}
className="menu-btn-add"
onClick={handleIncrement}
>
Add <IconPlus />
</button>
);
const increaseBtn = (
<button
aria-label={`Add ${item.label} to cart`}
className="menu-btn-item"
onClick={handleIncrement}
>
<IconPlus />
</button>
);
const decreaseBtn = (
<button
aria-label={`Remove ${item.label} from cart`}
className="menu-btn-item"
onClick={handleDecrement}
>
<IconMinus />
</button>
);
const qtyIndicator = (
<div className="menu-item-qty" role="status" aria-live="polite">
{quantity}
</div>
);
return (
<li className="menu-item">
<div>
<div className="menu-item-title">
<h4>{item.label}</h4>
<span>(${item.price})</span>
</div>
<p className="menu-item-description">{item.description}</p>
</div>
{quantity === 0 ? (
addBtn
) : (
<div className="menu-btn-group">
{decreaseBtn}
{qtyIndicator}
{increaseBtn}
</div>
)}
</li>
);
}
function PureMenuList(props) {
console.log('MenuList Re-Render');
const { menuList } = props;
return (
<ul className="menu-list">
{menuList.map((item) => (
<MenuItem key={item.id} item={item} />
))}
</ul>
);
}
export const MenuList = Brahmos.memo(PureMenuList);
export function Message(props) {
const { status } = props;
const messages = {
loading: 'Loading...',
error: (
<>
Menu failed to load.
<br />
Please try again...
</>
),
};
const messageText = messages[status];
if (!messageText) {
return null;
}
return (
<div
className={`message-${status}`}
role={status === 'error' ? 'alert' : 'status'}
aria-live="polite"
aria-busy={status === 'loading'}
>
{messageText}
</div>
);
}
export function PaymentFooter() {
const cartPrice = useCartPrice();
return (
<footer>
{cartPrice > 0 && (
<a
href="#payment"
onClick={(e) => e.preventDefault()}
className="food-app-pay-btn"
aria-live="polite"
>
Pay for food (${cartPrice})
</a>
)}
</footer>
);
}
// source- https://feathericons.com/
export function IconPlus() {
return (
<svg
className="icon-plus"
viewBox="0 0 24 24"
width="1em"
height="1em"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
focusable="false"
>
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
);
}
// source- https://feathericons.com/
export function IconMinus() {
return (
<svg
className="icon-minus"
viewBox="0 0 24 24"
width="1em"
height="1em"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
focusable="false"
>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
);
}
================================================
FILE: example/food-app/react-query/hooks.js
================================================
import { useMemo } from 'brahmos';
import { useQuery } from 'react-query';
import { useDietStore, useCartStore } from './zustand';
import { loadFoodData } from '../utils';
export function useLoadFoodQuery() {
const menuQuery = useQuery('menu', loadFoodData);
return menuQuery;
}
export function useMenuList() {
const diet = useDietStore((state) => state.diet);
const menuQuery = useLoadFoodQuery();
const data = menuQuery.data || [];
const menuList = useMemo(() => {
const computeMenuList = data.filter((item) => {
if (diet === 'all') {
return item;
}
return item.diet === diet;
});
return computeMenuList;
}, [diet, data]);
return menuList;
}
export function useCartPrice() {
const cartByIds = useCartStore((state) => state.cartByIds);
const menuList = useMenuList();
const cartPrice = useMemo(() => {
let cartPrice = 0;
menuList.forEach((item) => {
const cartItem = cartByIds[item.id] || { quantity: 0 };
cartPrice += item.price * cartItem.quantity;
});
return cartPrice;
}, [cartByIds, menuList]);
return cartPrice;
}
================================================
FILE: example/food-app/react-query/index.js
================================================
import { StrictMode } from 'brahmos';
import { QueryCache, ReactQueryCacheProvider } from 'react-query';
import App from './App';
import '../food-app.css';
const queryCache = new QueryCache({
defaultConfig: {
queries: {
staleTime: 300000, // 5 minutes
},
},
});
export default function ReduxExample() {
return (
<StrictMode>
<p>
This demo demonstrates Brahmos compatibility with React Query and Zustand.
<br />
The example is forked from{' '}
<a
href="https://github.com/itaditya/redux-hooks-for-food-delivery/tree/aditya-redux-to-rq-zustand"
target="_blank"
>
https://github.com/itaditya/redux-hooks-for-food-delivery/tree/aditya-redux-to-rq-zustand
</a>
</p>
<ReactQueryCacheProvider queryCache={queryCache}>
<App />
</ReactQueryCacheProvider>
</StrictMode>
);
}
================================================
FILE: example/food-app/react-query/zustand.js
================================================
import create from 'zustand';
export const useDietStore = create((set) => ({
diet: 'all',
changeDiet: () => set((state) => ({ diet: state.diet === 'veg' ? 'all' : 'veg' })),
}));
export const useCartStore = create((set, get) => ({
cartByIds: {},
addToCart(itemId) {
const { cartByIds } = get();
const cartItem = cartByIds[itemId] || {
quantity: 0,
};
cartItem.quantity += 1;
const newCart = {
...cartByIds,
[itemId]: cartItem,
};
set({
cartByIds: newCart,
});
},
removeFromCart(itemId) {
const { cartByIds } = get();
const cartItem = cartByIds[itemId];
if (!cartItem) {
return;
}
cartItem.quantity -= 1;
const newCart = {
...cartByIds,
[itemId]: cartItem,
};
set({
cartByIds: newCart,
});
},
}));
================================================
FILE: example/food-app/redux/App.js
================================================
import { Fragment, useEffect, useState } from 'brahmos';
import { shallowEqual, useSelector, useDispatch } from 'react-redux';
import { ACTIONS } from './redux';
import { MenuList, Message, PaymentFooter } from './Comps';
import { loadFoodData } from '../utils';
export default function App() {
const diet = useSelector((state) => state.diet);
const dispatch = useDispatch();
const stateAPIStatus = useLoadFoodData();
const menuList = useSelector(selectorMenu, shallowEqual);
useEffect(() => {
console.log('SERVER_EVENT: menu list changed');
}, [menuList]);
function handleVegToggle() {
dispatch({
type: ACTIONS.CHANGE_DIET,
});
}
return (
<div className="food-app">
<header>
<h1>Ordux</h1>
<label>
<input
type="checkbox"
className="veg-filter"
name="veg-checkbox"
value={diet}
checked={diet === 'veg'}
onChange={handleVegToggle}
/>
Veg Only
</label>
</header>
<Message status={stateAPIStatus} />
{stateAPIStatus === 'success' && (
<Fragment>
<main>
<MenuList menuList={menuList} />
</main>
<PaymentFooter />
</Fragment>
)}
</div>
);
}
function useLoadFoodData() {
const [stateAPIStatus, setAPIStatus] = useState('idle');
const dispatch = useDispatch();
useEffect(() => {
setAPIStatus('loading');
loadFoodData()
.then((data) => {
dispatch({
type: ACTIONS.LOAD_MENU,
payload: {
menu: data,
},
});
setAPIStatus('success');
})
.catch((error) => {
setAPIStatus('error');
});
}, [dispatch]);
return stateAPIStatus;
}
function selectorMenu(state) {
const { diet, menuIdList, menuById } = state;
const menuId = menuIdList[diet];
const menuList = [];
menuId.forEach((id) => {
menuList.push(menuById[id]);
});
return menuList;
}
================================================
FILE: example/food-app/redux/Comps.js
================================================
import Brahmos from 'brahmos';
import { useSelector, useDispatch } from 'react-redux';
import { ACTIONS } from './redux';
export function MenuItem(props) {
const { item } = props;
const cartByIds = useSelector((state) => state.cartByIds);
const dispatch = useDispatch();
const quantity = cartByIds[item.id]?.quantity ?? 0;
function handleIncrement() {
dispatch({
type: ACTIONS.ADD_TO_CART,
payload: {
itemId: item.id,
},
});
}
function handleDecrement() {
dispatch({
type: ACTIONS.REMOVE_FROM_CART,
payload: {
itemId: item.id,
},
});
}
const addBtn = (
<button
aria-label={`Add ${item.label} to cart`}
className="menu-btn-add"
onClick={handleIncrement}
>
Add <IconPlus />
</button>
);
const increaseBtn = (
<button
aria-label={`Add ${item.label} to cart`}
className="menu-btn-item"
onClick={handleIncrement}
>
<IconPlus />
</button>
);
const decreaseBtn = (
<button
aria-label={`Remove ${item.label} from cart`}
className="menu-btn-item"
onClick={handleDecrement}
>
<IconMinus />
</button>
);
const qtyIndicator = (
<div className="menu-item-qty" role="status" aria-live="polite">
{quantity}
</div>
);
return (
<li className="menu-item">
<div>
<div className="menu-item-title">
<h4>{item.label}</h4>
<span>(${item.price})</span>
</div>
<p className="menu-item-description">{item.description}</p>
</div>
{quantity === 0 ? (
addBtn
) : (
<div className="menu-btn-group">
{decreaseBtn}
{qtyIndicator}
{increaseBtn}
</div>
)}
</li>
);
}
function PureMenuList(props) {
console.log('MenuList Re-Render');
const { menuList } = props;
return (
<ul className="menu-list">
{menuList.map((item) => (
<MenuItem key={item.id} item={item} />
))}
</ul>
);
}
export const MenuList = Brahmos.memo(PureMenuList);
export function Message(props) {
const { status } = props;
const messages = {
loading: 'Loading...',
error: (
<>
Menu failed to load.
<br />
Please try again...
</>
),
};
const messageText = messages[status];
if (!messageText) {
return null;
}
return (
<div
className={`message-${status}`}
role={status === 'error' ? 'alert' : 'status'}
aria-live="polite"
aria-busy={status === 'loading'}
>
{messageText}
</div>
);
}
function selectorCartPrice(state) {
const { cartByIds, menuById } = state;
let cartPrice = 0;
const cartKeys = Object.keys(cartByIds);
cartKeys.forEach((id) => {
const item = menuById[id];
const cartItem = cartByIds[id];
const price = cartItem.quantity * item.price;
cartPrice += price;
});
return cartPrice;
}
export function PaymentFooter() {
const cartPrice = useSelector(selectorCartPrice);
return (
<footer>
{cartPrice > 0 && (
<a
href="#payment"
onClick={(e) => e.preventDefault()}
className="food-app-pay-btn"
aria-live="polite"
>
Pay for food (${cartPrice})
</a>
)}
</footer>
);
}
// source- https://feathericons.com/
export function IconPlus() {
return (
<svg
className="icon-plus"
viewBox="0 0 24 24"
width="1em"
height="1em"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
focusable="false"
>
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
);
}
// source- https://feathericons.com/
export function IconMinus() {
return (
<svg
className="icon-minus"
viewBox="0 0 24 24"
width="1em"
height="1em"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
focusable="false"
>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
);
}
================================================
FILE: example/food-app/redux/index.js
================================================
import { StrictMode } from 'brahmos';
import { Provider } from 'react-redux';
import App from './App';
import { createReduxStore } from './redux';
import '../food-app.css';
export default function ReduxExample() {
return (
<StrictMode>
<p>
This demo demonstrates Brahmos compatibility with Redux.
<br />
The example is forked from{' '}
<a href="https://github.com/itaditya/redux-hooks-for-food-delivery/" target="_blank">
https://github.com/itaditya/redux-hooks-for-food-delivery/
</a>
</p>
<Provider store={createReduxStore()}>
<App />
</Provider>
</StrictMode>
);
}
================================================
FILE: example/food-app/redux/redux.js
================================================
import { createStore } from 'redux';
export const ACTIONS = {
CHANGE_DIET: 'CHANGE_DIET',
LOAD_MENU: 'LOAD_MENU',
ADD_TO_CART: 'ADD_TO_CART',
REMOVE_FROM_CART: 'REMOVE_FROM_CART',
};
const initialState = {
diet: 'all',
menuById: {},
menuIdList: {
all: [],
veg: [],
},
cartByIds: {},
};
function foodReducer(state = initialState, action) {
switch (action.type) {
case ACTIONS.CHANGE_DIET: {
const { diet } = state;
const newDiet = diet === 'veg' ? 'all' : 'veg';
return {
...state,
diet: newDiet,
cartByIds: {},
};
}
case ACTIONS.LOAD_MENU: {
const { menu } = action.payload;
const menuById = {};
menu.forEach((item) => {
menuById[item.id] = item;
});
const allMenuId = menu.map((item) => item.id);
const vegMenuId = menu.filter((item) => item.diet === 'veg').map((item) => item.id);
return {
...state,
menuById,
menuIdList: {
all: allMenuId,
veg: vegMenuId,
},
};
}
case ACTIONS.ADD_TO_CART: {
const { itemId } = action.payload;
const { cartByIds } = state;
const cartItem = cartByIds[itemId] || {
quantity: 0,
};
cartItem.quantity += 1;
const newCart = {
...cartByIds,
[itemId]: cartItem,
};
return {
...state,
cartByIds: newCart,
};
}
case ACTIONS.REMOVE_FROM_CART: {
const { itemId } = action.payload;
const { cartByIds } = state;
const cartItem = cartByIds[itemId];
if (!cartItem) {
return state;
}
cartItem.quantity -= 1;
const newCart = {
...cartByIds,
[itemId]: cartItem,
};
return {
...state,
cartByIds: newCart,
};
}
default:
return state;
}
}
const enableReduxDevTools = window.__REDUX_DEVTOOLS_EXTENSION__?.();
export function createReduxStore() {
const store = createStore(foodReducer, enableReduxDevTools);
return store;
}
================================================
FILE: example/food-app/utils.js
================================================
import foodMenu from './food-menu.json';
export async function loadFoodData() {
return foodMenu;
}
================================================
FILE: example/hooks/index.js
================================================
import Brahmos, { useState, useEffect, useRef } from 'brahmos';
import ReactCredit from '../common/ReactCredit';
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest function.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
const id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
export default function Counter() {
const [count, setCount] = useState(0);
const [delay, setDelay] = useState(1000);
const [isRunning, setIsRunning] = useState(true);
useInterval(
() => {
// Your custom logic here
setCount(count + 1);
},
isRunning ? delay : null,
);
function handleDelayChange(e) {
setDelay(Number(e.target.value));
}
function handleIsRunningChange(e) {
setIsRunning(e.target.checked);
}
return (
<>
<p>
This demo demonstrates usage of hooks in Brahmos. The example here uses useState, useRef and
useEffect hooks to make setInterval declarative.
</p>
<h1>{count}</h1>
<input type="checkbox" checked={isRunning} onChange={handleIsRunningChange} /> Running
<br />
<input type="number" value={delay} onChange={handleDelayChange} />
<ReactCredit
name="declarative setInterval with hooks"
link="https://overreacted.io/making-setinterval-declarative-with-react-hooks/"
/>
</>
);
}
================================================
FILE: example/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<title>Brahmos Demo</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<div id="portal-container"></div>
</body>
</html>
================================================
FILE: example/index.js
================================================
import { render } from 'brahmos';
import { HashRouter as Router } from 'react-router-dom';
import App from './App.js';
function RootApp() {
return (
<Router>
<App />
</Router>
);
}
render(<RootApp />, document.getElementById('app'));
================================================
FILE: example/lazy-component/index.js
================================================
import Brahmos, { Suspense, lazy } from 'brahmos';
const LazyTodoList = lazy(() => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(import('../todo-list/index'));
}, 1500);
});
});
export default function LazyExample() {
return (
<Suspense fallback={<h2>Loading TodoList !!!</h2>}>
<h2> This Todo list is loaded lazily. </h2>
<LazyTodoList showDescription={false} />
</Suspense>
);
}
================================================
FILE: example/portals/index.js
================================================
import Brahmos, { createPortal, useState } from 'brahmos';
function Modal({ onClose }) {
return (
<div className="modal is-active">
<div className="modal-background"></div>
<div className="modal-card content">
<header className="modal-card-head">
<p className="modal-card-title">Modal title</p>
<button className="delete" aria-label="close" onClick={onClose}></button>
</header>
<section className="modal-card-body">
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices
eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut
vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
</p>
</section>
<footer className="modal-card-foot">
<button className="button is-primary" onClick={onClose}>
Save changes
</button>
<button className="button" onClick={onClose}>
Cancel
</button>
</footer>
</div>
</div>
);
}
export default function CreatePortalExample() {
const [display, setDisplay] = useState(false);
return (
<div>
{display &&
createPortal(
<Modal onClose={() => setDisplay(false)} />,
document.querySelector('#portal-container'),
)}
<p>
<strong>Click button to open modal.</strong> The modal will open in another root element.
</p>
<button
className="button is-primary"
onClick={() => {
setDisplay(true);
}}
>
Open Modal
</button>
</div>
);
}
================================================
FILE: example/sierpinski-triangle/index.js
================================================
import { Component, unstable_deferredUpdates, unstable_syncUpdates } from 'brahmos';
/**
* Source: https://github.com/facebook/react/blob/master/fixtures/fiber-triangle/index.html
*/
const dotStyle = {
position: 'absolute',
background: '#61dafb',
font: 'normal 15px sans-serif',
textAlign: 'center',
cursor: 'pointer',
};
const containerStyle = {
position: 'absolute',
transformOrigin: '0 0',
left: '50%',
top: '50%',
width: '10px',
height: '10px',
background: '#eee',
};
var targetSize = 25;
class Dot extends Component {
constructor() {
super();
this.state = { hover: false };
}
enter() {
this.setState({
hover: true,
});
}
leave() {
this.setState({
hover: false,
});
}
render() {
var props = this.props;
var s = props.size * 1.3;
var style = {
...dotStyle,
width: s + 'px',
height: s + 'px',
left: props.x + 'px',
top: props.y + 'px',
borderRadius: s / 2 + 'px',
lineHeight: s + 'px',
background: this.state.hover ? '#ff0' : dotStyle.background,
};
return (
<div style={style} onMouseEnter={() => this.enter()} onMouseLeave={() => this.leave()}>
{this.state.hover ? '*' + props.text + '*' : props.text}
</div>
);
}
}
class SierpinskiTriangle extends Component {
shouldComponentUpdate(nextProps) {
var o = this.props;
var n = nextProps;
return !(o.x === n.x && o.y === n.y && o.s === n.s && o.children === n.children);
}
render() {
let { x, y, s, children } = this.props;
if (s <= targetSize) {
return (
<Dot x={x - targetSize / 2} y={y - targetSize / 2} size={targetSize} text={children} />
);
return r;
}
var newSize = s / 2;
var slowDown = true;
if (slowDown) {
var e = performance.now() + 0.8;
while (performance.now() < e) {
// Artificially long execution time.
}
}
s /= 2;
return [
<SierpinskiTriangle x={x} y={y - s / 2} s={s}>
{children}
</SierpinskiTriangle>,
<SierpinskiTriangle x={x - s} y={y + s / 2} s={s}>
{children}
</SierpinskiTriangle>,
<SierpinskiTriangle x={x + s} y={y + s / 2} s={s}>
{children}
</SierpinskiTriangle>,
];
}
}
class Toggle extends Component {
constructor(props) {
super();
this.onChange = this.onChange.bind(this);
}
onChange(event) {
this.props.onChange(event.target.value === 'on');
}
render() {
const value = this.props.value;
return (
<label className="control" onChange={this.onChange}>
<label className="radio">
<input type="radio" name="value" value="on" checked={value} />
{this.props.onLabel}
</label>
<label className="radio">
<input type="radio" name="value" value="off" checked={!value} />
{this.props.offLabel}
</label>
</label>
);
}
}
class SierpinskiWrapper extends Component {
constructor() {
super();
this.state = {
seconds: 0,
useTimeSlicing: true,
};
this.tick = this.tick.bind(this);
this.onTimeSlicingChange = this.onTimeSlicingChange.bind(this);
}
componentDidMount() {
this.intervalID = setInterval(this.tick, 1000);
}
tick() {
if (this.state.useTimeSlicing) {
// Update is time-sliced.
unstable_deferredUpdates(() => {
this.setState({ seconds: (this.state.seconds % 10) + 1 });
});
} else {
// Update is not time-sliced. Causes demo to stutter.
this.setState({ seconds: (this.state.seconds % 10) + 1 });
}
}
onTimeSlicingChange(value) {
this.setState(() => ({ useTimeSlicing: value }));
}
componentWillUnmount() {
clearInterval(this.intervalID);
}
render() {
const seconds = this.state.seconds;
const elapsed = this.props.elapsed;
const t = (elapsed / 1000) % 10;
const scale = 1 + (t > 5 ? 10 - t : t) / 10;
const transform = 'scaleX(' + scale / 2.1 + ') scaleY(0.7) translateZ(0.1px)';
return (
<div>
<div>
<h3>Time-slicing</h3>
<p>Toggle this and observe the effect</p>
<Toggle
onLabel="On"
offLabel="Off"
onChange={this.onTimeSlicingChange}
value={this.state.useTimeSlicing}
/>
</div>
<div style={{ ...containerStyle, transform }}>
<div className="dot-container">
<SierpinskiTriangle x={0} y={0} s={1000}>
{seconds}
</SierpinskiTriangle>
</div>
</div>
</div>
);
}
}
export default class DemoApp extends Component {
constructor() {
super();
this.start = Date.now();
this.state = {
elapsed: this.start,
};
}
componentDidMount() {
this.updateElapsed();
}
componentWillUnmount() {
cancelAnimationFrame(this.animationFrameId);
}
updateElapsed() {
this.animationFrameId = requestAnimationFrame(() => {
unstable_syncUpdates(() => {
this.setState({
elapsed: Date.now() - this.start,
});
});
this.updateElapsed();
});
}
render() {
const { elapsed } = this.state;
return <SierpinskiWrapper elapsed={elapsed} />;
}
}
================================================
FILE: example/suspense-list/fakeApi.js
================================================
export function fetchProfileData() {
const userPromise = fetchUser();
const postsPromise = fetchPosts();
const triviaPromise = fetchTrivia();
return {
user: wrapPromise(userPromise),
posts: wrapPromise(postsPromise),
trivia: wrapPromise(triviaPromise),
};
}
// Suspense integrations like Relay implement
// a contract like this to integrate with React.
// Real implementations can be significantly more complex.
// Don't copy-paste this into your project!
function wrapPromise(promise) {
let status = 'pending';
let result;
const suspender = promise.then(
(r) => {
status = 'success';
result = r;
},
(e) => {
status = 'error';
result = e;
},
);
return {
read() {
if (status === 'pending') {
throw suspender;
} else if (status === 'error') {
throw result;
} else if (status === 'success') {
return result;
}
},
};
}
function fetchUser() {
console.log('fetch user...');
return new Promise((resolve) => {
setTimeout(() => {
console.log('fetched user');
resolve({
name: 'Ringo Starr',
});
}, 500);
});
}
const ringoPosts = [
{
id: 0,
text: 'I get by with a little help from my friends',
},
{
id: 1,
text: "I'd like to be under the sea in an octupus's garden",
},
{
id: 2,
text: 'You got that sand all over your feet',
},
];
function fetchPosts() {
const ringoPostsAtTheTime = ringoPosts;
console.log('fetch posts...');
return new Promise((resolve) => {
setTimeout(() => {
console.log('fetched posts');
resolve(ringoPostsAtTheTime);
}, 3000 * Math.random());
});
}
function fetchTrivia() {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{
id: 1,
text: 'The nickname "Ringo" came from his habit of wearing numerous rings.',
},
{
id: 2,
text: 'Plays the drums left-handed with a right-handed drum set.',
},
{
id: 3,
text: 'Nominated for one Daytime Emmy Award, but did not win',
},
]);
}, 3000 * Math.random());
});
}
================================================
FILE: example/suspense-list/index.js
================================================
/**
* Forked from: https://codesandbox.io/s/black-wind-byilt
*/
import Brahmos, { SuspenseList, Suspense, useEffect, useState } from 'brahmos';
import ReactCredit from '../common/ReactCredit';
import { fetchProfileData } from './fakeApi';
function ProfileDetails({ resource }) {
const user = resource.user.read();
return <h1>{user.name}</h1>;
}
function ProfileTimeline({ resource }) {
const posts = resource.posts.read();
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.text}</li>
))}
</ul>
);
}
function ProfileTrivia({ resource }) {
const trivia = resource.trivia.read();
return (
<>
<h2>Fun Facts</h2>
<ul>
{trivia.map((fact) => (
<li key={fact.id}>{fact.text}</li>
))}
</ul>
</>
);
}
function ProfilePage({ revealOrder = 'forwards', tail }) {
const [resource, setResource] = useState();
return (
<div style={{ minHeight: resource ? 250 : 0 }}>
<Suspense fallback={<h1>Loading...</h1>}>
<button
className="button is-primary"
onClick={() => {
setResource(fetchProfileData(0));
}}
>
Load/Reload
</button>
{resource && (
<>
<ProfileDetails resource={resource} />
<SuspenseList revealOrder={revealOrder} tail={tail}>
<Suspense fallback={<h2>Loading posts...</h2>}>
<ProfileTimeline resource={resource} />
</Suspense>
<Suspense fallback={<h2>Loading fun facts...</h2>}>
<ProfileTrivia resource={resource} />
</Suspense>
</SuspenseList>
</>
)}
</Suspense>
</div>
);
}
function App() {
return (
<>
<p>
This demo demonstrates Suspense List Implementation on Brahmos.
<br />
The APIs are mocked to respond in between 0-3000ms.
</p>
<div>
<hr />
<h3>Suspense list with forwards reveal order.</h3>
<p>
Though api response time can defer, in forwards reveal order, it guarantees the second
suspense will not reveal before the first suspense. In this example fun facts will never
be revealed before the post.
<br />
<strong>Click on button multiple times to see the effect.</strong>
</p>
<ProfilePage revealOrder="forwards" />
</div>
<div>
<hr />
<h3>Suspense list with backwards reveal order.</h3>
<p>
In backwards reveal order, it guarantees the suspense are revealed from last to first. In
this example post will never be revealed before the fun fact.
<br />
<strong>Click on button multiple times to see the effect.</strong>
</p>
<ProfilePage revealOrder="backwards" />
</div>
<div>
<hr />
<h3>Suspense list with together reveal order.</h3>
<p>In together reveal order, all the suspense are revealed together.</p>
<ProfilePage revealOrder="together" />
</div>
<div>
<hr />
<h3>Suspense list with collapsed loading state.</h3>
<p>Only one loading will be shown inside the SuspenseList at a time.</p>
<ProfilePage tail="collapsed" />
</div>
<div>
<hr />
<h3>Suspense list with no loading state.</h3>
<p>No loading will be shown inside the SuspenseList when tail prop is set to hidden.</p>
<ProfilePage tail="hidden" />
</div>
<ReactCredit name="Suspense List" link="https://codesandbox.io/s/black-wind-byilt" />
</>
);
}
export default App;
================================================
FILE: example/svg-chart/index.js
================================================
import Brahmos, { Component } from 'brahmos';
function Rect({ height, index }) {
return (
<rect
width="40"
y={120 - height}
x="50"
height={height}
style="transition: all ease .3s;"
transform={`translate(${43 * index},0)`}
/>
);
}
function Chart({ data }) {
return (
<svg width="420" height="120">
{data.map((height, index) => (
<Rect key={index} height={height} index={index} />
))}
</svg>
);
}
class SVGExample extends Component {
state = {
data: [99, 44, 11, 55, 33, 115, 4],
};
_shuffuleArray(array) {
var j, temp, i;
for (i = array.length; i; i--) {
j = Math.floor(Math.random() * i);
temp = array[i - 1];
array[i - 1] = array[j];
array[j] = temp;
}
return array;
}
shuffule = () => this.setState({ data: this._shuffuleArray(this.state.data) });
render() {
const { data } = this.state;
return (
<div>
<p>This demo demonstrate usage of dynamic svg in Brahmos.</p>
<Chart data={data} />
<button className="button is-primary" onClick={this.shuffule}>
Suffule
</button>
</div>
);
}
}
export default SVGExample;
================================================
FILE: example/third-party-component/index.js
================================================
import { PureComponent } from 'brahmos';
import { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
const data = [
{
name: 'Page A',
uv: 4000,
pv: 2400,
amt: 2400,
},
{
name: 'Page B',
uv: 3000,
pv: 1398,
amt: 2210,
},
{
name: 'Page C',
uv: 2000,
pv: 9800,
amt: 2290,
},
{
name: 'Page D',
uv: 2780,
pv: 3908,
amt: 2000,
},
{
name: 'Page E',
uv: 1890,
pv: 4800,
amt: 2181,
},
{
name: 'Page F',
uv: 2390,
pv: 3800,
amt: 2500,
},
{
name: 'Page G',
uv: 3490,
pv: 4300,
amt: 2100,
},
];
export default class RechartExample extends PureComponent {
render() {
return (
<div>
<p>
This demo demonstrate usage of third party react component in Brahmos. In this example we
are using{' '}
<a href="https://recharts.org/en-US/" target="_blank">
recharts
</a>
for rendering chart which internally uses{' '}
<a href="https://github.com/recharts/react-smooth" target="_blank">
react-smooth
</a>
. Both of them are react based libraries.
</p>
<BarChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="pv" fill="#8884d8" />
<Bar dataKey="uv" fill="#82ca9d" />
</BarChart>
</div>
);
}
}
================================================
FILE: example/time-slicing/Chart.js
================================================
import Brahmos, { PureComponent } from 'brahmos';
import {
VictoryArea,
VictoryAxis,
VictoryChart,
VictoryBar,
VictoryTheme,
VictoryScatter,
VictoryStack,
} from 'victory';
const colors = ['#fff489', '#fa57c1', '#b166cc', '#7572ff', '#69a6f9'];
export default class Charts extends PureComponent {
render() {
const streamData = this.props.data;
return (
<div>
<div style={{ display: 'flex' }}>
<VictoryChart
theme={VictoryTheme.material}
width={400}
height={400}
style={{
parent: {
backgroundColor: '#222',
},
}}
>
<VictoryAxis
style={{
axis: { stroke: 'white' },
tickLabels: { fill: 'white' },
}}
/>
<VictoryAxis
style={{
axis: { stroke: 'white' },
tickLabels: { fill: 'white' },
}}
dependentAxis
/>
<VictoryScatter
data={streamData[0]}
size={6}
style={{
data: {
fill: (d) => colors[d.x % 5],
},
}}
/>
</VictoryChart>
<VictoryChart
theme={VictoryTheme.material}
width={400}
height={400}
style={{
parent: {
backgroundColor: '#222',
},
}}
domainPadding={[20, 20]}
>
<VictoryAxis
style={{
axis: { stroke: 'white' },
tickLabels: { fill: 'white' },
}}
/>
<VictoryAxis
style={{
axis: { stroke: 'white' },
tickLabels: { fill: 'white' },
}}
dependentAxis
/>
<VictoryBar
data={streamData[0]}
style={{
data: {
fill: (d) => colors[d.x % 5],
stroke: 'none',
padding: 5,
},
}}
/>
</VictoryChart>
</div>
<div
style={{
display: 'flex',
position: 'relative',
top: '-50px',
}}
>
<VictoryChart
theme={VictoryTheme.material}
width={800}
height={350}
style={{
parent: {
backgroundColor: '#222',
},
}}
>
<VictoryAxis
style={{
axis: { stroke: 'white' },
tickLabels: { fill: 'white' },
}}
/>
<VictoryAxis
style={{
axis: { stroke: 'white' },
tickLabels: { fill: 'white' },
}}
dependentAxis
/>
<VictoryStack>
{streamData.map((data, i) => (
<VictoryArea key={i} data={data} colorScale={colors} />
))}
</VictoryStack>
</VictoryChart>
</div>
</div>
);
}
}
================================================
FILE: example/time-slicing/Clock.js
================================================
import Brahmos, { createRef, PureComponent } from 'brahmos';
const SPEED = 0.003 / Math.PI;
const FRAMES = 10;
export default class Clock extends PureComponent {
faceRef = createRef();
arcGroupRef = createRef();
clockHandRef = createRef();
frame = null;
hitCounter = 0;
rotation = 0;
t0 = Date.now();
arcs = [];
animate = () => {
const now = Date.now();
const td = now - this.t0;
this.rotation = (this.rotation + SPEED * td) % (2 * Math.PI);
this.t0 = now;
this.arcs.push({ rotation: this.rotation, td });
let lx, ly, tx, ty;
if (this.arcs.length > FRAMES) {
this.arcs.forEach(({ rotation, td }, i) => {
lx = tx;
ly = ty;
const r = 145;
tx = 155 + r * Math.cos(rotation);
ty = 155 + r * Math.sin(rotation);
const bigArc = SPEED * td < Math.PI ? '0' : '1';
const path = `M${tx} ${ty}A${r} ${r} 0 ${bigArc} 0 ${lx} ${ly}L155 155`;
const hue = 120 - Math.min(120, td / 4);
const colour = `hsl(${hue}, 100%, ${60 - i * (30 / FRAMES)}%)`;
if (i !== 0) {
const arcEl = this.arcGroupRef.current.children[i - 1];
arcEl.setAttribute('d', path);
arcEl.setAttribute('fill', colour);
}
});
this.clockHandRef.current.setAttribute('d', `M155 155L${tx} ${ty}`);
this.arcs.shift();
}
if (this.hitCounter > 0) {
this.faceRef.current.setAttribute('fill', `hsla(0, 0%, ${this.hitCounter}%, 0.95)`);
this.hitCounter -= 1;
} else {
this.hitCounter = 0;
this.faceRef.current.setAttribute('fill', 'hsla(0, 0%, 5%, 0.95)');
}
this.frame = requestAnimationFrame(this.animate);
};
componentDidMount() {
this.frame = requestAnimationFrame(this.animate);
if (this.faceRef.current) {
this.faceRef.current.addEventListener('click', this.handleClick);
}
}
componentDidUpdate() {
console.log('componentDidUpdate()', this.faceRef.current);
}
componentWillUnmount() {
this.faceRef.current.removeEventListener('click', this.handleClick);
if (this.frame) {
cancelAnimationFrame(this.frame);
}
}
handleClick = (e) => {
e.stopPropagation();
this.hitCounter = 50;
};
render() {
const paths = new Array(FRAMES);
for (let i = 0; i < FRAMES; i++) {
paths.push(<path className="arcHand" key={i} />);
}
return (
<div className="stutterer">
<svg height="310" width="310">
<circle
className="clockFace"
onClick={this.handleClick}
cx={155}
cy={155}
r={150}
ref={this.faceRef}
/>
<g ref={this.arcGroupRef}>{paths}</g>
<path className="clockHand" ref={this.clockHandRef} />
</svg>
</div>
);
}
}
================================================
FILE: example/time-slicing/index.js
================================================
import Brahmos, { PureComponent } from 'brahmos';
import { flushSync } from 'react-dom';
import Scheduler from 'scheduler';
import _ from 'lodash';
import Charts from './Charts';
import Clock from './Clock';
// import './index.css';
const cachedData = new Map();
class App extends PureComponent {
state = {
value: '',
strategy: 'sync',
showDemo: true,
showClock: false,
};
// Random data for the chart
getStreamData(input) {
if (cachedData.has(input)) {
return cachedData.get(input);
}
const multiplier = input.length !== 0 ? input.length : 1;
const complexity = (parseInt(window.location.search.substring(1), 10) / 100) * 25 || 25;
const data = _.range(5).map((t) =>
_.range(complexity * multiplier).map((j, i) => {
return {
x: j,
y: (t + 1) * _.random(0, 255),
};
}),
);
cachedData.set(input, data);
return data;
}
componentDidMount() {
window.addEventListener('keydown', (e) => {
if (e.key.toLowerCase() === '?') {
e.preventDefault();
this.setState((state) => ({
showClock: !state.showClock,
}));
}
});
}
handleChartClick = (e) => {
if (this.state.showDemo) {
if (e.shiftKey) {
this.setState({ showDemo: false });
}
return;
}
if (this.state.strategy !== 'async') {
flushSync(() => {
this.setState((state) => ({
showDemo: !state.showDemo,
}));
});
return;
}
if (this._ignoreClick) {
return;
}
this._ignoreClick = true;
Scheduler.unstable_next(() => {
this.setState({ showDemo: true }, () => {
this._ignoreClick = false;
});
});
};
debouncedHandleChange = _.debounce((value) => {
if (this.state.strategy === 'debounced') {
flushSync(() => {
this.setState({ value: value });
});
}
}, 1000);
renderOption(strategy, label) {
const { strategy: currentStrategy } = this.state;
return (
<label className={strategy === currentStrategy ? 'selected' : null}>
<input
type="radio"
checked={strategy === currentStrategy}
onChange={() => this.setState({ strategy })}
/>
{label}
</label>
);
}
handleChange = (e) => {
const value = e.target.value;
const { strategy } = this.state;
switch (strategy) {
case 'sync':
this.setState({ value });
break;
case 'debounced':
this.debouncedHandleChange(value);
break;
case 'async':
// TODO: useTransition hook instead.
setTimeout(() => {
this.setState({ value });
}, 0);
break;
default:
break;
}
};
render() {
const { showClock } = this.state;
const data = this.getStreamData(this.state.value);
return (
<div className="container">
<div className="rendering">
{this.renderOption('sync', 'Synchronous')}
{this.renderOption('debounced', 'Debounced')}
{this.renderOption('async', 'Concurrent')}
</div>
<input
className={'input ' + this.state.strategy}
placeholder="longer input → more components and DOM nodes"
defaultValue={this.state.input}
onChange={this.handleChange}
/>
<div className="demo" onClick={this.handleChartClick}>
{this.state.showDemo && <Charts data={data} onClick={this.handleChartClick} />}
<div style={{ display: showClock ? 'block' : 'none' }}>
<Clock />
</div>
</div>
</div>
);
}
}
================================================
FILE: example/todo-list/index.js
================================================
import Brahmos, { Component } from 'brahmos';
// Source: https://stackoverflow.com/a/12646864
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Source: https://stackoverflow.com/a/25821830
function randomColor() {
return `#${Math.floor(Math.random() * 16777215)
.toString(16)
.padStart(6, '0')}`;
}
export default class TodoList extends Component {
static defaultProps = {
maxCount: 5,
showDescription: true,
};
state = { todos: [], text: '' };
componentDidUpdate(prevProps, prevState) {
/**
* Imperatively updating background on first color-code item,
* to demonstrate element are persisted on shuffle
*/
if (prevState.todos.length !== this.state.todos.length) {
document.querySelector('.color-code').style.background = randomColor();
}
}
setText = (e) => {
this.setState({ text: e.target.value });
};
addTodo = () => {
const { todos, text } = this.state;
const { maxCount } = this.props;
if (!text || maxCount === todos.length) {
return;
}
const todo = {
text,
id: todos.length,
};
this.setState({ todos: [todo, ...todos], text: '' });
};
shuffle = () => {
const { todos } = this.state;
this.setState({ todos: shuffleArray(todos) });
};
render() {
const { todos, text } = this.state;
const { maxCount, showDescription } = this.props;
return (
<>
{showDescription && (
<p>
This demo demonstrates states, list and keyed list in Brahmos. A color code is also
added imperatively through DOM APIs to demonstrate keyed list are persisted (just
rearranged) on addition or shuffle.
</p>
)}
<form onSubmit={this.addTodo} action="javascript:">
<div className="field has-addons">
<div className="control">
<input className="input small-width" value={text} onChange={this.setText} />
</div>
<div className="control">
<button className="button is-dark" type="submit">
Add
</button>
</div>
</div>
</form>
<br />
<p>Latest todo item is added on top. Add 3 items or more to shuffle the list</p>
<ul>
{todos.map((todo) => (
<li key={todo.id}>
<span
style={{
width: '20px',
height: '20px',
display: 'inline-block',
verticalAlign: 'middle',
}}
className="color-code"
></span>{' '}
{todo.text}
</li>
))}
</ul>
<div className="control-wrap">
{!!todos.length && maxCount > todos.length && (
<span>You can add {maxCount - todos.length} items to this list </span>
)}
{maxCount === todos.length && <span>List is Full </span>}
{todos.length > 2 && (
<button className="button is-dark" type="button" onClick={this.shuffle}>
Shuffle
</button>
)}
</div>
</>
);
}
}
================================================
FILE: example/use-deferred-value/MySlowList.js
================================================
import Brahmos, { PureComponent } from 'brahmos';
// Note: this file is exactly the same in both examples.
function ListItem({ children }) {
const now = performance.now();
while (performance.now() - now < 1.5) {
// Note: this is an INTENTIONALLY EMPTY loop that
// DOES NOTHING for 1.5 milliseconds for EACH ITEM.
//
// It's meant to emulate what happens in a deep
// component tree with calculations and other
// work performed inside components that can't
// trivially be optimized or removed.
}
return <div className="ListItem">{children}</div>;
}
export default class MySlowList extends PureComponent {
render() {
const { text } = this.props;
const items = [];
const ln = text.length * 5;
for (let i = 0; i < ln; i++) {
items.push(
<ListItem key={i}>
Result #{i} for "{text}"
</ListItem>,
);
}
return (
<>
<p>
<b>Results for "{text}":</b>
</p>
<ul className="List">{items}</ul>
</>
);
}
}
================================================
FILE: example/use-deferred-value/index.js
================================================
import Brahmos, { useDeferredValue, useState, useEffect } from 'brahmos';
import MySlowList from './MySlowList';
import ReactCredit from '../common/ReactCredit';
/**
* Forked from:
* https://codesandbox.io/s/infallible-dewdney-9fkv9
*/
function Toggle({ concurrentMode, setConcurrentMode }) {
return (
<div className="control-wrap">
<strong>Concurrent Mode: </strong>
<label className="radio">
<input type="radio" checked={concurrentMode} onClick={() => setConcurrentMode(true)} />
On
</label>
<label className="radio">
<input type="radio" checked={!concurrentMode} onClick={() => setConcurrentMode(false)} />
Off
</label>
</div>
);
}
export default function App() {
const [text, setText] = useState('');
const [concurrentMode, setConcurrentMode] = useState(true);
// This is a new feature in Concurrent Mode.
// This value is allowed to "lag behind" the text input:
const deferredText = useDeferredValue(text, {
timeoutMs: 5000,
});
function handleChange(e) {
setText(e.target.value);
}
return (
<div className="App">
<p>Toggle concurrentMode and see the effect in input</p>
<Toggle concurrentMode={concurrentMode} setConcurrentMode={setConcurrentMode} />
<br />
<label className="control-wrap">
<span>Type into the input: </span>
<input className="input small-width" value={text} onChange={handleChange} />
</label>
<p>
Here we create 5 list item for each character in text box. Plus each of the list item
completely blocks the main thread for 1.5 milliseconds.
<br />
<br />
On concurrent mode we can see the app is able to stay responsive even the number of list
increases and only delays displaying the list. While in normal mode the input starts getting
janky as soon as the size of list grows.
</p>
<hr />
{/* Pass the "lagging" value to the list */}
<MySlowList text={concurrentMode ? deferredText : text} />
<ReactCredit
name="useDeferredValue hook"
link="https://codesandbox.io/s/infallible-dewdney-9fkv9"
/>
</div>
);
}
================================================
FILE: example/use-deferred-value-suspense/fakeApi.js
================================================
export function fetchProfileData(userId) {
const userPromise = fetchUser(userId);
const postsPromise = fetchPosts(userId);
return {
userId,
user: wrapPromise(userPromise),
posts: wrapPromise(postsPromise),
};
}
// Suspense integrations like Relay implement
// a contract like this to integrate with React.
// Real implementations can be significantly more complex.
// Don't copy-paste this into your project!
function wrapPromise(promise) {
let status = 'pending';
let result;
const suspender = promise.then(
(r) => {
status = 'success';
result = r;
},
(e) => {
status = 'error';
result = e;
},
);
return {
read() {
if (status === 'pending') {
throw suspender;
} else if (status === 'error') {
throw result;
} else if (status === 'success') {
return result;
}
},
};
}
export function fetchUser(userId) {
console.log('fetch user ' + userId + '...');
return new Promise((resolve) => {
setTimeout(() => {
console.log('fetched user ' + userId);
switch (userId) {
case 0:
resolve({
name: 'Ringo Starr',
});
break;
case 1:
resolve({
name: 'George Harrison',
});
break;
case 2:
resolve({
name: 'John Lennon',
});
break;
case 3:
resolve({
name: 'Paul McCartney',
});
break;
default:
throw Error('Unknown user.');
}
}, 300);
});
}
export function fetchPosts(userId) {
console.log('fetch posts for ' + userId + '...');
return new Promise((resolve) => {
setTimeout(() => {
console.log('fetched posts for ' + userId);
switch (userId) {
case 0:
resolve([
{
id: 0,
text: 'I get by with a little help from my friends',
},
{
id: 1,
text: "I'd like to be under the sea in an octupus's garden",
},
{
id: 2,
text: 'You got that sand all over your feet',
},
]);
break;
case 1:
resolve([
{
id: 0,
text: 'Turn off your mind, relax, and float downstream',
},
{
id: 1,
text: 'All things must pass',
},
{
id: 2,
text: "I look at the world and I notice it's turning",
},
]);
break;
case 2:
resolve([
{
id: 0,
text: 'Living is easy with eyes closed',
},
{
id: 1,
text: "Nothing's gonna change my world",
},
{
id: 2,
text: 'I am the walrus',
},
]);
break;
case 3:
resolve([
{
id: 0,
text: 'Woke up, fell out of bed',
},
{
id: 1,
text: 'Here, there, and everywhere',
},
{
id: 2,
text: 'Two of us sending postcards, writing letters',
},
]);
break;
default:
throw Error('Unknown user.');
}
}, 1500);
});
}
================================================
FILE: example/use-deferred-value-suspense/index.js
================================================
/**
* Forked from: https://codesandbox.io/s/vigorous-keller-3ed2b
*/
import Brahmos, { useDeferredValue, useState, useTransition, Suspense } from 'brahmos';
import ReactCredit from '../common/ReactCredit';
import { fetchProfileData } from './fakeApi';
function getNextId(id) {
return id === 3 ? 0 : id + 1;
}
const initialResource = fetchProfileData(0);
function App() {
const [resource, setResource] = useState(initialResource);
const [startTransition, isPending] = useTransition({
timeoutMs: 3000,
});
return (
<>
<p>
This demo demonstrates how we can use useDeferredValue to prevent loading state on non
important data.
<br />
Read more about it in official React Docs.
<a
href="https://reactjs.org/docs/concurrent-mode-patterns.html#deferring-a-value"
target="_blank"
rel="noopener"
>
https://reactjs.org/docs/concurrent-mode-patterns.html#deferring-a-value
</a>
<br />
<br />
Here the profile detail API is mocked to respond in 300ms and post API is mocked to respond
in 1500ms. The app will keep showing stale content for post data until its loaded or for max
5 seconds if you keep pressing next before a post gets a chance to load.
</p>
<div className="control-wrap">
<button
className="button is-primary"
disabled={isPending}
onClick={() => {
startTransition(() => {
const nextUserId = getNextId(resource.userId);
setResource(fetchProfileData(nextUserId));
});
}}
>
Next
</button>
{isPending ? ' Loading...' : null}
</div>
<ProfilePage resource={resource} />
<ReactCredit name="useDeferredValue" link="https://codesandbox.io/s/vigorous-keller-3ed2b" />
</>
);
}
function ProfilePage({ resource }) {
const deferredResource = useDeferredValue(resource, {
timeoutMs: 5000,
});
return (
<Suspense fallback={<h1>Loading profile...</h1>}>
<ProfileDetails resource={resource} />
<Suspense fallback={<h1>Loading posts...</h1>}>
<ProfileTimeline resource={deferredResource} isStale={deferredResource !== resource} />
</Suspense>
</Suspense>
);
}
function ProfileDetails({ resource }) {
const user = resource.user.read();
return <h1>{user.name}</h1>;
}
function ProfileTimeline({ isStale, resource }) {
const posts = resource.posts.read();
return (
<ul style={{ opacity: isStale ? 0.7 : 1 }}>
{posts.map((post) => (
<li key={post.id}>{post.text}</li>
))}
</ul>
);
}
export default App;
================================================
FILE: example_old/App.js
================================================
import Brahmos, { Suspense, lazy, Component } from '../src';
import TodoList from './TodoList';
import UseStateExample from './UseStateExample';
import ContextExample from './context';
import RefsExample from './RefsExample';
import CreatePortalExample from './createPortalExample';
import SVGExample from './SVGExample';
import LazySuspenseExample from './lazySuspenseExample';
import ErrorBoundaryExample from './ErrorBoundaryExample';
function shuffle(array) {
array = [...array];
var currentIndex = array.length;
var temporaryValue;
var randomIndex;
// While there remain elements to shuffle...
while (currentIndex !== 0) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
export function OldApp() {
return (
<div>
{/* <div className="wrapper">
<h2>Todo List</h2>
<TodoList />
</div>
<div className="wrapper">
<h2>useState hook example</h2>
<UseStateExample />
</div> */}
{/* <div className="wrapper">
<h2>Context api example</h2>
<ContextExample />
</div> */}
{/* <div className="wrapper">
<h2>Refs example</h2>
<RefsExample />
</div> */}
{/* <div className="wrapper">
<h2>SVG Example</h2>
<SVGExample />
</div> */}
{/* <div className="wrapper">
<h2>Lazy and Suspense Example</h2>
<LazySuspenseExample />
</div> */}
{/* <div className="wrapper">
<h2>Error Boundary Example</h2>
<ErrorBoundaryExample />
</div> */}
{/** Keep the portal example on last */}
<div className="wrapper">
<h2>CreatePortal Example</h2>
<CreatePortalExample />
</div>
</div>
);
}
function Div() {
return <div>askjdkajsdks</div>;
}
function Div2({ length, list }) {
return (
<ul>
{list.slice(0, length).map((val, idx) => (
<li key={val}>{val}</li>
))}
</ul>
);
}
export class AppBase extends Component {
state = {
name: '',
list: [1, 2, 3, 4],
};
render() {
const { name, list } = this.state;
return (
<div>
<input
type="text"
value={name}
onChange={(e) => {
this.setState({ name: e.target.value.slice(0, 10) });
Brahmos.unstable_deferredUpdates(() => {
this.setState({ list: shuffle(list) }, null);
});
// this.deferredSetState({ list: shuffle(list) }, null);
}}
/>
<p>Hello {name}</p> {'Hello World'}
<Div2 length={name.length} list={list} />
{name && <Div />}
</div>
);
}
}
export default function App() {
return (
<div>
<OldApp />
</div>
);
}
================================================
FILE: example_old/ErrorBoundaryExample.js
================================================
import Brahmos from '../src';
class ErrorBoundary extends Brahmos.Component {
constructor(props) {
super(props);
this.state = { error: null, errorInfo: null };
}
static getDerivedStateFromError(error) {
return { error };
}
componentDidCatch(error, errorInfo) {
// Catch errors in any components below and re-render with error message
this.setState({
error: error,
errorInfo: errorInfo,
});
// You can also log error messages to an error reporting service here
}
render() {
if (this.state.error) {
// Error path
return (
<div>
<h2>Something went wrong.</h2>
<details style={{ whiteSpace: 'pre-wrap' }}>
{this.state.error && this.state.error.toString()}
<br />
{this.state.errorInfo && this.state.errorInfo.componentStack}
</details>
</div>
);
}
// Normally, just render children
return this.props.children;
}
}
class BuggyCounter extends Brahmos.Component {
constructor(props) {
super(props);
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(({ counter }) => ({
counter: counter + 1,
}));
}
render() {
if (this.state.counter === 5) {
// Simulate a JS error
throw new Error('I crashed!');
}
return <h1 onClick={this.handleClick}>{this.state.counter}</h1>;
}
}
export default function ErrorBoundaryExample() {
return (
<div>
<p>
<b>
This is an example of error boundaries in React 16.
<br />
<br />
Click on the numbers to increase the counters.
<br />
The counter is programmed to throw when it reaches 5. This simulates a JavaScript error in
a component.
</b>
</p>
<hr />
<ErrorBoundary>
<p>
These two counters are inside the same error boundary. If one crashes, the error boundary
will replace both of them.
</p>
<BuggyCounter />
<BuggyCounter />
</ErrorBoundary>
<hr />
<p>
These two counters are each inside of their own error boundary. So if one crashes, the other
is not affected.
</p>
<ErrorBoundary>
<BuggyCounter />
</ErrorBoundary>
<ErrorBoundary>
<BuggyCounter />
</ErrorBoundary>
</div>
);
}
================================================
FILE: example_old/RefsExample.js
================================================
import Brahmos, { Component, createRef, forwardRef } from '../src';
class Child extends Component {
logSomething() {
// console.log('something');
}
render() {
return <div>Hello World!!</div>;
}
}
const ChildWithForwardedRef = forwardRef((props, ref) => {
return <div ref={ref}>Forwarded Ref</div>;
});
export default class RefsExample extends Component {
constructor() {
super();
this.childCreateRef = createRef();
this.domCreateRef = createRef();
this.forwardedRef = createRef();
}
logRefs = () => {
console.log(this.childCreateRef);
console.log(this.childCallbackRef);
console.log(this.domCreateRef);
console.log(this.domCbRef);
console.log(this.forwardedRef);
};
render() {
return (
<div>
<Child ref={this.childCreateRef} />
<Child
ref={(instance) => {
this.childCallbackRef = instance;
}}
/>
<div ref={this.domCreateRef}>Dom create ref</div>
<div
ref={(elm) => {
this.domCbRef = elm;
}}
>
Dom callback ref
</div>
<ChildWithForwardedRef ref={this.forwardedRef} />
<button onClick={this.logRefs}>Log refs</button>
</div>
);
}
}
================================================
FILE: example_old/SVGExample.js
================================================
import Brahmos, { Component } from '../src';
function Path() {
return (
<path
fill="#703E03"
d="M29.203 45.82c1.69-.807 2.947-2.117 4.708-2.838 1.607-.658 3.201-1.199 4.833-1.834 1.597-.621 3.242-.886 4.83-1.362 1.673-.502 3.236-.53 4.937-.953 1.737-.431 3.513-1.197 5.333-1.667 1.412-.365 2.669-1.173 4.1-1.389 2.5-.378 4.977.133 7.4.723 1.939.472 3.729 1.028 5.667 1.333 1.651.26 2.876.773 4.5 1.167 1.959.475 4.125 1.768 6.1 2.28 1.979.514 4.2.655 6.067 1.554 3.612 1.739 7.296 2.528 10.721 4.448 3.489 1.956 5.612 4.218 7.009 8.829 1.659 5.478 2.217 13.509 1.604 19.056-.16 1.446-.494 3.428-.833 4.833-.397 1.653-.967 3.458-1.334 5.167-.561 2.605-1.511 4.076-3.067 6.319-1.573 2.268-3.493 4.336-5.037 6.634-1.276 1.901-2.764 3.523-4.345 5.158-2.773 2.867-5.986 5.034-9.654 6.366-1.673.607-3.126 1.624-4.729 2.355-1.852.843-3.623 1.234-5.775 1.448-4.083.406-8.257-.108-12.199-.676-1.575-.227-4.594-.044-5.444-1.467 3.956-1.482 8.64-.723 12.827-1.323 3.803-.546 6.978-2.452 10.142-4.46 1.951-1.237 4.331-2.173 6.021-3.749 1.562-1.456 2.935-3.242 4.524-4.629 2.886-2.518 5.756-5.546 7.175-9.199.799-2.058 1.604-4.157 2.005-6.343.375-2.045.383-4.43.938-6.433-1.547-.019-1.213 3.997-8.046 4.497 3.166-2.167 8.166-9.453 8.166-11.834 0-3.333.088-5.217-1.166-8.333-.651-1.618-.942-3.283-2.167-4.5-1.729-1.716-3.293-4.038-5.449-4.86-4.349-1.659-8.537-3.441-13.143-4.029-4.493-.574-8.646-2.018-13.129-2.407-5.001-.434-10.206-.379-15.091.449-1.575.267-3.17.636-4.752.796-1.8.182-3.32-.131-5.04.612-1.65.714-2.971 1.943-4.793 2.351-1.8.403-3.505.673-5.208 1.529-1.437.723-2.78 1.875-4.157 2.753-1.905 1.214-4.284 1.733-2.436-1.195 1.644-2.604 4.715-3.903 7.387-5.177z"
opacity="0.44"
/>
);
}
function Image() {
return (
<svg
x="0"
y="0"
width="100"
height="100"
version="1.1"
viewBox="0 0 123.61 125.76"
xmlSpace="preserve"
>
<path
fill="none"
stroke="#FFF"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0"
d="M.011.72v125.04h123.6V0H.251c-.28.041-.261.379-.24.72z"
/>
<path
fill="#050000"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0"
d="M3.851 56.88c1.875 3.062 6.286 4.794 10.32 5.52-3.6 21.854 5.785 38.208 17.28 47.52 9.626 7.797 24.468 13.2 40.32 10.32 13.498-2.452 24.493-10.479 31.44-20.641 6.735-9.851 11.13-25.374 6.479-41.76 4.692-.748 9.717-1.163 12.24-4.08.052-9.999-4.273-15.911-9.84-21.36-6.505-6.367-13.335-10.312-21.84-14.64-7.029-3.576-14.632-6.652-23.28-7.92-.736-1.941-.329-4.134-.72-6-2.249-.137-5.195.203-6.72 0-.284.117-.544.256-.72.48-.067 2.467.547 4.253.48 6.72-9.243 1.915-16.295 5.3-24.48 9.36-9.875 4.898-17.957 10.942-24.72 18.96C5.735 44.523-.715 49.42 3.851 56.88z"
/>
<path
fill="#F9BA06"
stroke="#FFF"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0"
d="M24.491 97.44c7.703 11.266 22.038 20.568 39.36 19.92 17.409-.652 30.38-10.228 37.44-21.601 7.217-11.626 9.833-32.751.72-46.56-5.724-3.712-13.155-5.204-20.4-7.92-7.037-2.639-15.007-5.472-23.04-5.52-.079 0-.162-.006-.24 0-3.503.292-7.329 2.729-11.04 3.6-5.467 1.284-10.551 2.881-14.88 4.8-4.286 1.9-8.381 3.702-10.56 6.96-8.976 13.424-4.837 35.385 2.64 46.321z"
/>
<path
fill="#020000"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0"
d="M25.931 65.04c.156 19.995 30.532 19.669 30.48-.24-.023-8.815-7.445-15.833-16.8-14.88-7.844.799-13.742 7.203-13.68 15.12zM83.051 80.64c7.981-.146 14.55-6.614 14.88-14.399.426-10.062-7.827-16.826-16.8-15.84-8.55.939-14.171 7.654-13.68 16.081.454 7.797 6.885 14.319 15.6 14.158z"
/>
<path
fill="#FFF"
stroke="#FFF"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0"
d="M29.771 67.2c1.94 12.828 20.939 11.152 22.8.24 1.567-9.189-5.502-15.075-13.68-13.681-5.996 1.024-10.167 6.521-9.12 13.441zM71.291 67.68c1.939 12.828 20.938 11.152 22.8.24 1.567-9.188-5.503-15.075-13.68-13.68-5.996 1.023-10.167 6.52-9.12 13.44z"
/>
<path
fill="#050000"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0"
d="M53.771 78.48c-.206 1.394-1.983 1.216-2.16 2.64 3.445 5.921 15.521 5.449 19.68.479-.063-1.536-.285-2.915-1.44-3.359-2.749 4.479-13.187 4.846-16.08.24z"
/>
<path
fill="#050000"
d="M36.011 94.08c8.396 6.568 26.5 11.277 40.32 6.72 1.326-.438 2.738-1.567 3.84-2.64-.583-5.279-3.393-2.688-6.96-1.68-2.283.645-6.163 1.229-8.16 1.439-8.81.932-14.93-1.887-20.16-4.32-2.641-1.229-4.706-2.354-6.24-3.6-1.957-1.589-2.51-4.383-4.56-5.04-.547-.176-2.935.736-3.12 2.4-.374 3.352 4.412 4.362 5.04 6.721z"
/>
<Path />
<path
fill="#703E03"
d="M62.178 85.5c-1.299.069-2.554.292-3.833.009-1.331-.294-2.541-1.274-3.974-1.15-.102 1.731 3.847 3.931 5.187 4.675 2.28 1.268 5.146 2.301 7.787 1.812 1.651-.306 3.156-1.4 4.135-2.741.764-1.047 2.148-4.111.522-5.095-1.138-.688-2.841.876-3.844 1.316-1.897.835-3.929 1.066-5.98 1.174z"
opacity="0.46"
/>
</svg>
);
}
function Chart({ data }) {
return (
<svg width="420" height="120">
{data.map((item, i) => (
<rect
width="40"
y={120 - item}
x="50"
height={item}
style="transition: all ease .3s;"
transform={`translate(${43 * i},0)`}
/>
))}
</svg>
);
}
class SVGExample extends Component {
state = {
data: [99, 44, 11, 55, 33, 115, 4],
};
_shuffuleArray(array) {
var j, temp, i;
for (i = array.length; i; i--) {
j = Math.floor(Math.random() * i);
temp = array[i - 1];
array[i - 1] = array[j];
array[j] = temp;
}
return array;
}
shuffule = () => this.setState({ data: this._shuffuleArray(this.state.data) });
render() {
const { data } = this.state;
return (
<div>
<Image />
<Chart data={data} />
<button onClick={this.shuffule}>Suffule</button>
</div>
);
}
}
export default SVGExample;
================================================
FILE: example_old/TodoList.js
================================================
import Brahmos, { Component } from '../src';
export default class TodoList extends Component {
static defaultProps = {
maxCount: 5,
};
state = { todos: [], text: '' };
setText = (e) => {
this.setState({ text: e.target.value });
};
addTodo = () => {
let { todos, text } = this.state;
const { maxCount } = this.props;
if (!text || maxCount === todos.length) {
return;
}
todos = todos.concat(text);
this.setState({ todos, text: '' });
};
componentDidMount() {
// console.log('TODO List mounted');
}
render() {
const { todos, text } = this.state;
const { maxCount } = this.props;
return (
<form onSubmit={this.addTodo} action="javascript:">
<input value={text} onInput={this.setText} />
<button type="submit">Add</button>
<ul>
{todos.map((todo, idx) => (
<li key={idx}>{todo}</li>
))}
</ul>
{maxCount > todos.length && (
<span>You can add {maxCount - todos.length} items to this list</span>
)}
{maxCount === todos.length && <span>List is Full</span>}
</form>
);
}
}
================================================
FILE: example_old/UnMountAtNode.js
================================================
import Brahmos, { Component, unmountComponentAtNode } from '../src';
export default class UnMountAtNode extends Component {
removeNode = () => {
setTimeout(() => {
unmountComponentAtNode(document.getElementById('unmount-node'));
}, 1000);
};
componentWillUnmount() {
// console.log('component will unmount life cycle called!!');
}
render() {
return (
<div>
<p>
{' '}
Remove a mounted Brahmos component from the DOM and clean up its event handlers and state.
If no component was mounted in the container, calling this function does nothing. Returns
true if a component was unmounted and false if there was no component to unmount.{' '}
</p>
<div>
<button onClick={this.removeNode}> Remove node</button>
</div>
</div>
);
}
}
================================================
FILE: example_old/UseStateExample.js
================================================
import Brahmos, { useState } from '../src';
import friends from './friends.json';
export default function UseStateExample() {
const [filterStr, setFilter] = useState('');
const filteredLower = filterStr.toLowerCase();
const filteredFriend = friends.filter(({ name }) => {
return name.toLowerCase().startsWith(filteredLower);
});
return (
<div>
<input value={filterStr} onChange={(e) => setFilter(e.target.value)} />
<ul>
{filteredFriend.map(({ _id, name }) => {
return <li key={_id}>{name}</li>;
})}
</ul>
</div>
);
}
================================================
FILE: example_old/concurrentApp.js
================================================
import _Brahmos from '../src';
import data from './data.json';
// Doing this to check performance
const Brahmos = _Brahmos;
const { Component, PureComponent } = Brahmos;
function shuffle(array) {
array = [...array];
var currentIndex = array.length;
var temporaryValue;
var randomIndex;
// While there remain elements to shuffle...
while (currentIndex !== 0) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function duplicateData(data, count) {
const newData = [];
const ln = data.length;
for (let i = 0; i < count; i++) {
newData.push({ ...data[i % ln], id: i });
}
return newData;
}
class Result extends PureComponent {
render() {
const { result } = this.props;
return (
<div className="result">
<div>
<a href={result.html_url} target="_blank">
{result.full_name}
</a>
<button>OK</button>
🌟<strong>{result.stargazers_count}</strong>
</div>
<p>{result.description}</p>
</div>
);
}
}
// function Result(props) {
// const { result } = props;
// return (
// <div className="result">
// <div>
// <a href={result.html_url} target="_blank">
// {result.full_name}
// </a>
// <button>OK</button>
// 🌟<strong>{result.stargazers_count}</strong>
// </div>
// <p>{result.description}</p>
// </div>
// );
// }
// export const Result = ({ result }) => {
// // let i = 0;
// // while (i < 100000000) i++;
// return (
// <div className="result">
// <div>
// <a href={result.html_url} target="_blank">
// {result.full_name}
// </a>
// <button>OK</button>
// 🌟<strong>{result.stargazers_count}</strong>
// </div>
// <p>{result.description}</p>
// </div>
// );
// };
const initialTime = performance.now();
export default class App extends Component {
state = { results: [] };
stateUpdateTime = initialTime;
componentDidMount() {
this.setState({
results: duplicateData(data.items, 1000),
});
// setInterval(() => {
// this.shuffle();
// }, 10000);
// document.querySelector('#shuffle-btn').addEventListener('click', this.shuffle);
}
componentDidUpdate() {
console.log(performance.now() - this.stateUpdateTime);
}
shuffle = () => {
// console.log('State update');
this.stateUpdateTime = performance.now();
// this.state.results.reverse();
// this.forceUpdate();
this.setState({ results: shuffle(this.state.results) });
};
clear = () => {
this.stateUpdateTime = performance.now();
this.setState({ results: [] });
};
render(props) {
const { results, value = '' } = this.state || {};
// let i = 0;
// while (i < 10000000) i++;
return (
<div>
<h1>Examples</h1>
<input
value={value}
onChange={(e) => {
// console.log('Event update');
this.stateUpdateTime = performance.now();
this.setState({ value: e.target.value.slice(0, 10) });
}}
/>
<button id="shuffle-btn" onClick={this.shuffle}>
Shuffle
</button>
<button onClick={this.clear}>Clear</button>
<div className="list">
{results.map((result) => (
<Result key={result.id} result={result} />
))}
</div>
</div>
);
}
}
================================================
FILE: example_old/context.js
================================================
import Brahmos, { Component, createContext, useContext, useState } from '../src';
const BrahmosContext = createContext('Brahmos');
// context as static property
class ContextStaticProperty extends Component {
render() {
const name = this.context;
return <div>Hello {name}</div>;
}
}
ContextStaticProperty.contextType = BrahmosContext;
function ContextConsumer() {
return <BrahmosContext.Consumer>{(name) => <div>Hello {name}</div>}</BrahmosContext.Consumer>;
}
function UseContext() {
const name = useContext(BrahmosContext);
return <div>Hello {name}</div>;
}
export default function ContextExample() {
const [name, setName] = useState();
return (
<div>
<input value={name} onChange={(e) => setName(e.target.value)} />
<BrahmosContext.Provider value={name}>
<h3>ContextConsumer</h3>
<ContextConsumer />
<h3>ContextStaticProperty</h3>
<ContextStaticProperty />
<h3>useContext Hook</h3>
<UseContext />
</BrahmosContext.Provider>
<div>
<h3>ContextConsumer without Provider</h3>
<ContextConsumer />
<h3>useContext without Provider</h3>
<UseContext />
</div>
</div>
);
}
================================================
FILE: example_old/createPortalExample.js
================================================
import Brahmos, { Component, createPortal, useState } from '../src';
class Child extends Component {
componentWillUnmount() {
// console.log('unmounted');
}
render() {
return <div>Hello New Root!</div>;
}
}
function CreatePortalExample() {
const [display, setDisplay] = useState(true);
return (
<div>
{display && createPortal(<Child />, document.querySelector('#another-root'))}
<button
onClick={() => {
setDisplay(!display);
}}
>
Toggle
</button>
</div>
);
}
export default CreatePortalExample;
================================================
FILE: example_old/data.json
================================================
{
"total_count": 3782,
"incomplete_results": false,
"items": [
{
"id": 42283287,
"node_id": "MDEwOlJlcG9zaXRvcnk0MjI4MzI4Nw==",
"name": "preact",
"full_name": "preactjs/preact",
"private": false,
"owner": {
"login": "preactjs",
"id": 26872990,
"node_id": "MDEyOk9yZ2FuaXphdGlvbjI2ODcyOTkw",
"avatar_url": "https://avatars3.githubusercontent.com/u/26872990?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/preactjs",
"html_url": "https://github.com/preactjs",
"followers_url": "https://api.github.com/users/preactjs/followers",
"following_url": "https://api.github.com/users/preactjs/following{/other_user}",
"gists_url": "https://api.github.com/users/preactjs/gists{/gist_id}",
"starred_url": "https://api.github.com/users/preactjs/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/preactjs/subscriptions",
"organizations_url": "https://api.github.com/users/preactjs/orgs",
"repos_url": "https://api.github.com/users/preactjs/repos",
"events_url": "https://api.github.com/users/preactjs/events{/privacy}",
"received_events_url": "https://api.github.com/users/preactjs/received_events",
"type": "Organization",
"site_admin": false
},
"html_url": "https://github.com/preactjs/preact",
"description": "⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.",
"fork": false,
"url": "https://api.github.com/repos/preactjs/preact",
"forks_url": "https://api.github.com/repos/preactjs/preact/forks",
"keys_url": "https://api.github.com/repos/preactjs/preact/keys{/key_id}",
"collaborators_url": "https://api.github.com/repos/preactjs/preact/collaborators{/collaborator}",
"teams_url": "https://api.github.com/repos/preactjs/preact/teams",
"hooks_url": "https://api.github.com/repos/preactjs/preact/hooks",
"issue_events_url": "https://api.github.com/repos/preactjs/preact/issues/events{/number}",
"events_url": "https://api.github.com/repos/preactjs/preact/events",
"assignees_url": "https://api.github.com/repos/preactjs/preact/assignees{/user}",
"branches_url": "https://api.github.com/repos/preactjs/preact/branches{/branch}",
"tags_url": "https://api.github.com/repos/preactjs/preact/tags",
"blobs_url": "https://api.github.com/repos/preactjs/preact/git/blobs{/sha}",
"git_tags_url": "https://api.github.com/repos/preactjs/preact/git/tags{/sha}",
"git_refs_url": "https://api.github.com/repos/preactjs/preact/git/refs{/sha}",
"trees_url": "https://api.github.com/repos/preactjs/preact/git/trees{/sha}",
"statuses_url": "https://api.github.com/repos/preactjs/preact/statuses/{sha}",
"languages_url": "https://api.github.com/repos/preactjs/preact/languages",
"stargazers_url": "https://api.github.com/repos/preactjs/preact/stargazers",
"contributors_url": "https://api.github.com/repos/preactjs/preact/contributors",
"subscribers_url": "https://api.github.com/repos/preactjs/preact/subscribers",
"subscription_url": "https://api.github.com/repos/preactjs/preact/subscription",
"commits_url": "https://api.github.com/repos/preactjs/preact/commits{/sha}",
"git_commits_url": "https://api.github.com/repos/preactjs/preact/git/commits{/sha}",
"comments_url": "https://api.github.com/repos/preactjs/preact/comments{/number}",
"issue_comment_url": "https://api.github.com/repos/preactjs/preact/issues/comments{/number}",
"contents_url": "https://api.github.com/repos/preactjs/preact/contents/{+path}",
"compare_url": "https://api.github.com/repos/preactjs/preact/compare/{base}...{head}",
"merges_url": "https://api.github.com/repos/preactjs/preact/merges",
"archive_url": "https://api.github.com/repos/preactjs/preact/{archive_format}{/ref}",
"downloads_url": "https://api.github.com/repos/preactjs/preact/downloads",
"issues_url": "https://api.github.com/repos/preactjs/preact/issues{/number}",
"pulls_url": "https://api.github.com/repos/preactjs/preact/pulls{/number}",
"milestones_url": "https://api.github.com/repos/preactjs/preact/milestones{/number}",
"notifications_url": "https://api.github.com/repos/preactjs/preact/notifications{?since,all,participating}",
"labels_url": "https://api.github.com/repos/preactjs/preact/labels{/name}",
"releases_url": "https://api.github.com/repos/preactjs/preact/releases{/id}",
"deployments_url": "https://api.github.com/repos/preactjs/preact/deployments",
"created_at": "2015-09-11T02:40:18Z",
"updated_at": "2020-05-15T04:34:56Z",
"pushed_at": "2020-05-14T02:58:48Z",
"git_url": "git://github.com/preactjs/preact.git",
"ssh_url": "git@github.com:preactjs/preact.git",
"clone_url": "https://github.com/preactjs/preact.git",
"svn_url": "https://github.com/preactjs/preact",
"homepage": "https://preactjs.com",
"size": 6574,
"stargazers_count": 26215,
"watchers_count": 26215,
"language": "JavaScript",
"has_issues": true,
"has_projects": true,
"has_downloads": true,
"has_wiki": true,
"has_pages": true,
"forks_count": 1428,
"mirror_url": null,
"archived": false,
"disabled": false,
"open_issues_count": 162,
"license": {
"key": "mit",
"name": "MIT License",
"spdx_id": "MIT",
"url": "https://api.github.com/licenses/mit",
"node_id": "MDc6TGljZW5zZTEz"
},
"forks": 1428,
"open_issues": 162,
"watchers": 26215,
"default_branch": "master",
"score": 1.0
},
{
"id": 91839306,
"node_id": "MDEwOlJlcG9zaXRvcnk5MTgzOTMwNg==",
"name": "preact-cli",
"full_name": "preactjs/preact-cli",
"private": false,
"owner": {
"login": "preactjs",
"id": 26872990,
"node_id": "MDEyOk9yZ2FuaXphdGlvbjI2ODcyOTkw",
"avatar_url": "https://avatars3.githubusercontent.com/u/26872990?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/preactjs",
"html_url": "https://github.com/preactjs",
"followers_url": "https://api.github.com/users/preactjs/followers",
"following_url": "https://api.github.com/users/preactjs/following{/other_user}",
"gists_url": "https://api.github.com/users/preactjs/gists{/gist_id}",
"starred_url": "https://api.github.com/users/preactjs/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/preactjs/subscriptions",
"organizations_url": "https://api.github.com/users/preactjs/orgs",
"repos_url": "https://api.github.com/users/preactjs/repos",
"events_url": "https://api.github.com/users/preactjs/events{/privacy}",
"received_events_url": "https://api.github.com/users/preactjs/received_events",
"type": "Organization",
"site_admin": false
},
"html_url": "https://github.com/preactjs/preact-cli",
"description": "😺 Your next Preact PWA starts in 30 seconds.",
"fork": false,
"url": "https://api.github.com/repos/preactjs/preact-cli",
"forks_url": "https://api.github.com/repos/preactjs/preact-cli/forks",
"keys_url": "https://api.github.com/repos/preactjs/preact-cli/keys{/key_id}",
"collaborators_url": "https://api.github.com/repos/preactjs/preact-cli/collaborators{/collaborator}",
"teams_url": "https://api.github.com/repos/preactjs/preact-cli/teams",
"hooks_url": "https://api.github.com/repos/preactjs/preact-cli/hooks",
"issue_events_url": "https://api.github.com/repos/preactjs/preact-cli/issues/events{/number}",
"events_url": "https://api.github.com/repos/preactjs/preact-cli/events",
"assignees_url": "https://api.github.com/repos/preactjs/preact-cli/assignees{/user}",
"branches_url": "https://api.github.com/repos/preactjs/preact-cli/branches{/branch}",
"tags_url": "https://api.github.com/repos/preactjs/preact-cli/tags",
"blobs_url": "https://api.github.com/repos/preactjs/preact-cli/git/blobs{/sha}",
"git_tags_url": "https://api.github.com/repos/preactjs/preact-cli/git/tags{/sha}",
"git_refs_url": "https://api.github.com/repos/preactjs/preact-cli/git/refs{/sha}",
"trees_url": "https://api.github.com/repos/preactjs/preact-cli/git/trees{/sha}",
"statuses_url": "https://api.github.com/repos/preactjs/preact-cli/statuses/{sha}",
"languages_url": "https://api.github.com/repos/preactjs/preact-cli/languages",
"stargazers_url": "https://api.github.com/repos/preactjs/preact-cli/stargazers",
"contributors_url": "https://api.github.com/repos/preactjs/preact-cli/contributors",
"subscribers_url": "https://api.github.com/repos/preactjs/preact-cli/subscribers",
"subscription_url": "https://api.github.com/repos/preactjs/preact-cli/subscription",
"commits_url": "https://api.github.com/repos/preactjs/preact-cli/commits{/sha}",
"git_commits_url": "https://api.github.com/repos/preactjs/preact-cli/git/commits{/sha}",
"comments_url": "https://api.github.com/repos/preactjs/preact-cli/comments{/number}",
"issue_comment_url": "https://api.github.com/repos/preactjs/preact-cli/issues/comments{/number}",
"contents_url": "https://api.github.com/repos/preactjs/preact-cli/contents/{+path}",
"compare_url": "https://api.github.com/repos/preactjs/preact-cli/compare/{base}...{head}",
"merges_url": "https://api.github.com/repos/preactjs/preact-cli/merges",
"archive_url": "https://api.github.com/repos/preactjs/preact-cli/{archive_format}{/ref}",
"downloads_url": "https://api.github.com/repos/preactjs/preact-cli/downloads",
"issues_url": "https://api.github.com/repos/preactjs/preact-cli/issues{/number}",
"pulls_url": "https://api.github.com/repos/preactjs/preact-cli/pulls{/number}",
"milestones_url": "https://api.github.com/repos/preactjs/preact-cli/milestones{/number}",
"notifications_url": "https://api.github.com/repos/preactjs/preact-cli/notifications{?since,all,participating}",
"labels_url": "https://api.github.com/repos/preactjs/preact-cli/labels{/name}",
"releases_url": "https://api.github.com/repos/preactjs/preact-cli/releases{/id}",
"deployments_url": "https://api.github.com/repos/preactjs/preact-cli/deployments",
"created_at": "2017-05-19T19:34:36Z",
"updated_at": "2020-05-14T16:27:47Z",
"pushed_at": "2020-05-14T15:23:10Z",
"git_url": "git://github.com/preactjs/preact-cli.git",
"ssh_url": "git@github.com:preactjs/preact-cli.git",
"clone_url": "https://github.com/preactjs/preact-cli.git",
"svn_url": "https://github.com/preactjs/preact-cli",
"homepage": "https://cli-demo-next.preactjs.com",
"size": 6479,
"stargazers_count": 4143,
"watchers_count": 4143,
"language": "JavaScript",
"has_issues": true,
"has_projects": true,
"has_downloads": true,
"has_wiki": true,
"has_pages": false,
"forks_count": 344,
"mirror_url": null,
"archived": false,
"disabled": false,
"open_issues_count": 112,
"license": {
"key": "mit",
"name": "MIT License",
"spdx_id": "MIT",
"url": "https://api.github.com/licenses/mit",
"node_id": "MDc6TGljZW5zZTEz"
},
"forks": 344,
"open_issues": 112,
"watchers": 4143,
"default_branch": "master",
"score": 1.0
},
{
"id": 55373335,
"node_id": "MDEwOlJlcG9zaXRvcnk1NTM3MzMzNQ==",
"name": "preact-www",
"full_name": "preactjs/preact-www",
"private": false,
"owner": {
"login": "preactjs",
"id": 26872990,
"node_id": "MDEyOk9yZ2FuaXphdGlvbjI2ODcyOTkw",
"avatar_url": "https://avatars3.githubusercontent.com/u/26872990?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/preactjs",
"html_url": "https://github.com/preactjs",
"followers_url": "https://api.github.com/users/preactjs/followers",
"following_url": "https://api.github.com/users/preactjs/following{/other_user}",
"gists_url": "https://api.github.com/users/preactjs/gists{/gist_id}",
"starred_url": "https://api.github.com/users/preactjs/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/preactjs/subscriptions",
"organizations_url": "https://api.github.com/users/preactjs/orgs",
"repos_url": "https://api.github.com/users/preactjs/repos",
"events_url": "https://api.github.com/users/preactjs/events{/privacy}",
"received_events_url": "https://api.github.com/users/preactjs/received_events",
"type": "Organization",
"site_admin": false
},
"html_url": "https://github.com/preactjs/preact-www",
"description": ":book: Preact documentation website.",
"fork": false,
"url": "https://api.github.com/repos/preactjs/preact-www",
"forks_url": "https://api.github.com/repos/preactjs/preact-www/forks",
"keys_url": "https://api.github.com/repos/preactjs/preact-www/keys{/key_id}",
"collaborators_url": "https://api.github.com/repos/preactjs/preact-www/collaborators{/collaborator}",
"teams_url": "https://api.github.com/repos/preactjs/preact-www/teams",
"hooks_url": "https://api.github.com/repos/preactjs/preact-www/hooks",
"issue_events_url": "https://api.github.com/repos/preactjs/preact-www/issues/events{/number}",
"events_url": "https://api.github.com/repos/preactjs/preact-www/events",
"assignees_url": "https://api.github.com/repos/preactjs/preact-www/assignees{/user}",
"branches_url": "https://api.github.com/repos/preactjs/preact-www/branches{/branch}",
"tags_url": "https://api.github.com/repos/preactjs/preact-www/tags",
"blobs_url": "https://api.github.com/repos/preactjs/preact-www/git/blobs{/sha}",
"git_tags_url": "https://api.github.com/repos/preactjs/preact-www/git/tags{/sha}",
"git_refs_url": "https://api.github.com/repos/preactjs/preact-www/git/refs{/sha}",
"trees_url": "https://api.github.com/repos/preactjs/preact-www/git/trees{/sha}",
"statuses_url": "https://api.github.com/repos/preactjs/preact-www/statuses/{sha}",
"languages_url": "https://api.github.com/repos/preactjs/preact-www/languages",
"stargazers_url": "https://api.github.com/repos/preactjs/preact-www/stargazers",
"contributors_url": "https://api.github.com/repos/preactjs/preact-www/contributors",
"subscribers_url": "https://api.github.com/repos/preactjs/preact-www/subscribers",
"subscription_url": "https://api.github.com/repos/preactjs/preact-www/subscription",
"commits_url": "https://api.github.com/repos/preactjs/preact-www/commits{/sha}",
"git_commits_url": "https://api.github.com/repos/preactjs/preact-www/git/commits{/sha}",
"comments_url": "https://api.github.com/repos/preactjs/preact-www/comments{/number}",
"issue_comment_url": "https://api.github.com/repos/preactjs/preact-www/issues/comments{/number}",
"contents_url": "https://api.github.com/repos/preactjs/preact-www/contents/{+path}",
"compare_url": "https://api.github.com/repos/preactjs/preact-www/compare/{base}...{head}",
"merges_url": "https://api.github.com/repos/preactjs/preact-www/merges",
"archive_url": "https://api.github.com/repos/preactjs/preact-www/{archive_format}{/ref}",
"downloads_url": "https://api.github.com/repos/preactjs/preact-www/downloads",
"issues_url": "https://api.github.com/repos/preactjs/preact-www/issues{/number}",
"pulls_url": "https://api.github.com/repos/preactjs/preact-www/pulls{/number}",
"milestones_url": "https://api.github.com/repos/preactjs/preact-www/milestones{/number}",
"notifications_url": "https://api.github.com/repos/preactjs/preact-www/notifications{?since,all,participating}",
"labels_url": "https://api.github.com/repos/preactjs/preact-www/labels{/name}",
"releases_url": "https://api.github.com/repos/preactjs/preact-www/releases{/id}",
"deployments_url": "https://api.github.com/repos/preactjs/preact-www/deployments",
"created_at": "2016-04-03T23:00:51Z",
"updated_at": "2020-05-14T21:10:20Z",
"pushed_at": "2020-05-14T23:37:26Z",
"git_url": "git://github.com/preactjs/preact-www.git",
"ssh_url": "git@github.com:preactjs/preact-www.git",
"clone_url": "https://github.com/preactjs/preact-www.git",
"svn_url": "https://github.com/preactjs/preact-www",
"homepage": "https://preactjs.com",
"size": 4959,
"stargazers_count": 247,
"watchers_count": 247,
"language": "JavaScript",
"has_issues": true,
"has_projects": true,
"has_downloads": true,
"has_wiki": false,
"has_pages": false,
"forks_count": 342,
"mirror_url": null,
"archived": false,
"disabled": false,
"open_issues_count": 44,
"license": {
"key": "mit",
"name": "MIT License",
"spdx_id": "MIT",
"url": "https://api.github.com/licenses/mit",
"node_id": "MDc6TGljZW5zZTEz"
},
"forks": 342,
"open_issues": 44,
"watchers": 247,
"default_branch": "master",
"score": 1.0
},
{
"id": 49995432,
"node_id": "MDEwOlJlcG9zaXRvcnk0OTk5NTQzMg==",
"name": "preact-boilerplate",
"full_name": "developit/preact-boilerplate",
"private": false,
"owner": {
"login": "developit",
"id": 105127,
"node_id": "MDQ6VXNlcjEwNTEyNw==",
"avatar_url": "https://avatars2.githubusercontent.com/u/105127?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/developit",
"html_url": "https://github.com/developit",
"followers_url": "https://api.github.com/users/developit/followers",
"following_url": "https://api.github.com/users/developit/following{/other_user}",
"gists_url": "https://api.github.com/users/developit/gists{/gist_id}",
"starred_url": "https://api.github.com/users/developit/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/developit/subscriptions",
"organizations_url": "https://api.github.com/users/developit/orgs",
"repos_url": "https://api.github.com/users/developit/repos",
"events_url": "https://api.github.com/users/developit/events{/privacy}",
"received_events_url": "https://api.github.com/users/developit/received_events",
"type": "User",
"site_admin": false
},
"html_url": "https://github.com/developit/preact-boilerplate",
"description": ":guitar: Ready-to-rock Preact starter project, powered by Webpack.",
"fork": false,
"url": "https://api.github.com/repos/developit/preact-boilerplate",
"forks_url": "https://api.github.com/repos/developit/preact-boilerplate/forks",
"keys_url": "https://api.github.com/repos/developit/preact-boilerplate/keys{/key_id}",
"collaborators_url": "https://api.github.com/repos/developit/preact-boilerplate/collaborators{/collaborator}",
"teams_url": "https://api.github.com/repos/developit/preact-boilerplate/teams",
"hooks_url": "https://api.github.com/repos/developit/preact-boilerplate/hooks",
"issue_events_url": "https://api.github.com/repos/developit/preact-boilerplate/issues/events{/number}",
"events_url": "https://api.github.com/repos/developit/preact-boilerplate/events",
"assignees_url": "https://api.github.com/repos/developit/preact-boilerplate/assignees{/user}",
"branches_url": "https://api.github.com/repos/developit/preact-boilerplate/branches{/branch}",
"tags_url": "https://api.github.com/repos/developit/preact-boilerplate/tags",
"blobs_url": "https://api.github.com/repos/developit/preact-boilerplate/git/blobs{/sha}",
"git_tags_url": "https://api.github.com/repos/developit/preact-boilerplate/git/tags{/sha}",
"git_refs_url": "https://api.github.com/repos/developit/preact-boilerplate/git/refs{/sha}",
"trees_url": "https://api.github.com/repos/developit/preact-boilerplate/git/trees{/sha}",
"statuses_url": "https://api.github.com/repos/developit/preact-boilerplate/statuses/{sha}",
"languages_url": "https://api.github.com/repos/developit/preact-boilerplate/languages",
"stargazers_url": "https://api.github.com/repos/developit/preact-boilerplate/stargazers",
"contributors_url": "https://api.github.com/repos/developit/preact-boilerplate/contributors",
"subscribers_url": "https://api.github.com/repos/developit/preact-boilerplate/subscribers",
"subscription_url": "https://api.github.com/repos/developit/preact-boilerplate/subscription",
"commits_url": "https://api.github.com/repos/developit/preact-boilerplate/commits{/sha}",
"git_commits_url": "https://api.github.com/repos/developit/preact-boilerplate/git/commits{/sha}",
"comments_url": "https://api.github.com/repos/developit/preact-boilerplate/comments{/number}",
"issue_comment_url": "https://api.github.com/repos/developit/preact-boilerplate/issues/comments{/number}",
"contents_url": "https://api.github.com/repos/developit/preact-boilerplate/contents/{+path}",
"compare_url": "https://api.github.com/repos/developit/preact-boilerplate/compare/{base}...{head}",
"merges_url": "https://api.github.com/repos/developit/preact-boilerplate/merges",
"archive_url": "https://api.github.com/repos/developit/preact-boilerplate/{archive_format}{/ref}",
"downloads_url": "https://api.github.com/repos/developit/preact-boilerplate/downloads",
"issues_url": "https://api.github.com/repos/developit/preact-boilerplate/issues{/number}",
"pulls_url": "https://api.github.com/repos/developit/preact-boilerplate/pulls{/number}",
"milestones_url": "https://api.github.com/repos/developit/preact-boilerplate/milestones{/number}",
"notifications_url": "https://api.github.com/repos/developit/preact-boilerplate/notifications{?since,all,participating}",
"labels_url": "https://api.github.com/repos/developit/preact-boilerplate/labels{/name}",
"releases_url": "https://api.github.com/repos/developit/preact-boilerplate/releases{/id}",
"deployments_url": "https://api.github.com/repos/developit/preact-boilerplate/deployments",
"created_at": "2016-01-20T01:27:33Z",
"updated_at": "2020-05-10T04:15:21Z",
"pushed_at": "2020-05-13T04:01:56Z",
"git_url": "git://github.com/developit/preact-boilerplate.git",
"ssh_url": "git@github.com:developit/preact-boilerplate.git",
"clone_url": "https://github.com/developit/preact-boilerplate.git",
"svn_url": "https://github.com/developit/preact-boilerplate",
"homepage": "https://preact-boilerplate.surge.sh",
"size": 472,
"stargazers_count": 941,
"watchers_count": 941,
"language": "JavaScript",
"has_issues": true,
"has_projects": true,
"has_downloads": true,
"has_wiki": true,
"has_pages": false,
"forks_count": 193,
"mirror_url": null,
"archived": false,
"disabled": false,
"open_issues_count": 34,
"license": null,
"forks": 193,
"open_issues": 34,
"watchers": 941,
"default_branch": "master",
"score": 1.0
},
{
"id": 45793760,
"node_id": "MDEwOlJlcG9zaXRvcnk0NTc5Mzc2MA==",
"name": "preact-compat",
"full_name": "preactjs/preact-compat",
"private": false,
"owner": {
"login": "preactjs",
"id": 26872990,
"node_id": "MDEyOk9yZ2FuaXphdGlvbjI2ODcyOTkw",
"avatar_url": "https://avatars3.githubusercontent.com/u/26872990?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/preactjs",
"html_url": "https://github.com/preactjs",
"followers_url": "https://api.github.com/users/preactjs/followers",
"following_url": "https://api.github.com/users/preactjs/following{/other_user}",
"gists_url": "https://api.github.com/users/preactjs/gists{/gist_id}",
"starred_url": "https://api.github.com/users/preactjs/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/preactjs/subscriptions",
"organizations_url": "https://api.github.com/users/preactjs/orgs",
"repos_url": "https://api.github.com/users/preactjs/repos",
"events_url": "https://api.github.com/users/preactjs/events{/privacy}",
"received_events_url": "https://api.github.com/users/preactjs/received_events",
"type": "Organization",
"site_admin": false
},
"html_url": "https://github.com/preactjs/preact-compat",
"description": ":raised_hands: React compatibility layer for Preact.",
"fork": false,
"url": "https://api.github.com/repos/preactjs/preact-compat",
"forks_url": "https://api.github.com/repos/preactjs/preact-compat/forks",
"keys_url": "https://api.github.com/repos/preactjs/preact-compat/keys{/key_id}",
"collaborators_url": "https://api.github.com/repos/preactjs/preact-compat/collaborators{/collaborator}",
"teams_url": "https://api.github.com/repos/preactjs/preact-compat/teams",
"hooks_url": "https://api.github.com/repos/preactjs/preact-compat/hooks",
"issue_events_url": "https://api.github.com/repos/preactjs/preact-compat/issues/events{/number}",
"events_url": "https://api.github.com/repos/preactjs/preact-compat/events",
"assignees_url": "https://api.github.com/repos/preactjs/preact-compat/assignees{/user}",
"branches_url": "https://api.github.com/repos/preactjs/preact-compat/branches{/branch}",
"tags_url": "https://api.github.com/repos/preactjs/preact-compat/tags",
"blobs_url": "https://api.github.com/repos/preactjs/preact-compat/git/blobs{/sha}",
"git_tags_url": "https://api.github.com/repos/preactjs/preact-compat/git/tags{/sha}",
"git_refs_url": "https://api.github.com/repos/preactjs/preact-compat/git/refs{/sha}",
"trees_url": "https://api.github.com/repos/preactjs/preact-compat/git/trees{/sha}",
"statuses_url": "https://api.github.com/repos/preactjs/preact-compat/statuses/{sha}",
"languages_url": "https://api.github.com/repos/preactjs/preact-compat/languages",
"stargazers_url": "https://api.github.com/repos/preactjs/preact-compat/stargazers",
"contributors_url": "https://api.github.com/repos/preactjs/preact-compat/contributors",
"subscribers_url": "https://api.github.com/repos/preactjs/preact-compat/subscribers",
"subscription_url": "https://api.github.com/repos/preactjs/preact-compat/subscription",
"commits_url": "https://api.github.com/repos/preactjs/preact-compat/commits{/sha}",
"git_commits_url": "https://api.github.com/repos/preactjs/preact-compat/git/commits{/sha}",
"comments_url": "https://api.github.com/repos/preactjs/preact-compat/comments{/number}",
"issue_comment_url": "https://api.github.com/repos/preactjs/preact-compat/issues/comments{/number}",
"contents_url": "https://api.github.com/repos/preactjs/preact-compat/contents/{+path}",
"compare_url": "https://api.github.com/repos/preactjs/preact-compat/compare/{base}...{head}",
"merges_url": "https://api.github.com/repos/preactjs/preact-compat/merges",
"archive_url": "https://api.github.com/repos/preactjs/preact-compat/{archive_format}{/ref}",
"downloads_url": "https://api.github.com/repos/preactjs/preact-compat/downloads",
"issues_url": "https://api.github.com/repos/preactjs/preact-compat/issues{/number}",
"pulls_url": "https://api.github.com/repos/preactjs/preact-compat/pulls{/number}",
"milestones_url": "https://api.github.com/repos/preactjs/preact-compat/milestones{/number}",
"notifications_url": "https://api.github.com/repos/preactjs/preact-compat/notifications{?since,all,participating}",
"labels_url": "https://api.github.com/repos/preactjs/preact-compat/labels{/name}",
"releases_url": "https://api.github.com/repos/preactjs/preact-compat/releases{/id}",
"deployments_url": "https://api.github.com/repos/preactjs/preact-compat/deployments",
"created_at": "2015-11-08T18:47:28Z",
"updated_at": "2020-05-10T15:45:50Z",
"pushed_at": "2020-03-06T12:28:17Z",
"git_url": "git://github.com/preactjs/preact-compat.git",
"ssh_url": "git@github.com:preactjs/preact-compat.git",
"clone_url": "https://github.com/preactjs/preact-compat.git",
"svn_url": "https://github.com/preactjs/preact-compat",
"homepage": "http://npm.im/preact-compat",
"size": 283,
"stargazers_count": 875,
"watchers_count": 875,
"language": "JavaScript",
"has_issues": true,
"has_projects": true,
"has_downloads": true,
"has_wiki": true,
"has_pages": false,
"forks_count": 139,
"mirror_url": null,
"archived": false,
"disabled": false,
"open_issues_count": 47,
"license": {
"key": "mit",
"name": "MIT License",
"spdx_id": "MIT",
"url": "https://api.github.com/licenses/mit",
"node_id": "MDc6TGljZW5zZTEz"
},
"forks": 139,
"open_issues": 47,
"watchers": 875,
"default_branch": "master",
"score": 1.0
},
{
"id": 46458028,
"node_id": "MDEwOlJlcG9zaXRvcnk0NjQ1ODAyOA==",
"name": "preact-router",
"full_name": "preactjs/preact-router",
"private": false,
"owner": {
"login": "preactjs",
"id": 26872990,
"node_id": "MDEyOk9yZ2FuaXphdGlvbjI2ODcyOTkw",
"avatar_url": "https://avatars3.githubusercontent.com/u/26872990?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/preactjs",
"html_url": "https://github.com/preactjs",
"followers_url": "https://api.github.com/users/preactjs/followers",
"following_url": "https://api.github.com/users/preactjs/following{/other_user}",
"gists_url": "https://api.github.com/users/preactjs/gists{/gist_id}",
"starred_url": "https://api.github.com/users/preactjs/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/preactjs/subscriptions",
"organizations_url": "https://api.github.com/users/preactjs/orgs",
"repos_url": "https://api.github.com/users/preactjs/repos",
"events_url": "https://api.github.com/users/preactjs/events{/privacy}",
"received_events_url": "https://api.github.com/users/preactjs/received_events",
"type": "Organization",
"site_admin": false
},
"html_url": "https://github.com/preactjs/preact-router",
"description": ":earth_americas: URL router for Preact.",
"fork": false,
"url": "https://api.github.com/repos/preactjs/preact-router",
"forks_url": "https://api.github.com/repos/preactjs/preact-router/forks",
"keys_url": "https://api.github.com/repos/preactjs/preact-router/keys{/key_id}",
"collaborators_url": "https://api.github.com/repos/preactjs/preact-router/collaborators{/collaborator}",
"teams_url": "https://api.github.com/repos/preactjs/preact-router/teams",
"hooks_url": "https://api.github.com/repos/preactjs/preact-router/hooks",
"issue_events_url": "https://api.github.com/repos/preactjs/preact-router/issues/events{/number}",
"events_url": "https://api.github.com/repos/preactjs/preact-router/events",
"assignees_url": "https://api.github.com/repos/preactjs/preact-router/assignees{/user}",
"branches_url": "https://api.github.com/repos/preactjs/preact-router/branches{/branch}",
"tags_url": "https://api.github.com/repos/preactjs/preact-router/tags",
"blobs_url": "https://api.github.com/repos/preactjs/preact-router/git/blobs{/sha}",
"git_tags_url": "https://api.github.com/repos/preactjs/preact-router/git/tags{/sha}",
"git_refs_url": "https://api.github.com/repos/preactjs/preact-router/git/refs{/sha}",
"trees_url": "https://api.github.com/repos/preactjs/preact-router/git/trees{/sha}",
"statuses_url": "https://api.github.com/repos/preactjs/preact-router/statuses/{sha}",
"languages_url": "https://api.github.com/repos/preactjs/preact-router/languages",
"stargazers_url": "https://api.github.com/repos/preactjs/preact-router/stargazers",
"contributors_url": "https://api.github.com/repos/preactjs/preact-router/contributors",
"subscribers_url": "https://api.github.com/repos/preactjs/preact-router/subscribers",
"subscription_url": "https://api.github.com/repos/preactjs/preact-router/subscription",
"commits_url": "https://api.github.com/repos/preactjs/preact-router/commits{/sha}",
"git_commits_url": "https://api.github.com/repos/preactjs/preact-router/git/commits{/sha}",
"comments_url": "https://api.github.com/repos/preactjs/preact-router/comments{/number}",
"issue_comment_url": "https://api.github.com/repos/preactjs/preact-router/issues/comments{/number}",
"contents_url": "https://api.github.com/repos/preactjs/preact-router/contents/{+path}",
"compare_url": "https://api.github.com/repos/preactjs/preact-router/compare/{base}...{head}",
"merges_url": "https://api.github.com/repos/preactjs/preact-router/merges",
"archive_url": "https://api.github.com/repos/preactjs/preact-router/{archive_format}{/ref}",
"downloads_url": "https://api.github.com/repos/preactjs/preact-router/downloads",
"issues_url": "https://api.github.com/repos/preactjs/preact-router/issues{/number}",
"pulls_url": "https://api.github.com/repos/preactjs/preact-router/pulls{/number}",
"milestones_url": "https://api.github.com/repos/preactjs/preact-router/milestones{/number}",
"notifications_url": "https://api.github.com/repos/preactjs/preact-router/notifications{?since,all,participating}",
"labels_url": "https://api.github.com/repos/preactjs/preact-router/labels{/name}",
"releases_url": "https://api.github.com/repos/preactjs/preact-router/releases{/id}",
"deployments_url": "https://api.github.com/repos/preactjs/preact-router/deployments",
"created_at": "2015-11-19T01:04:24Z",
"updated_at": "2020-05-14T17:03:55Z",
"pushed_at": "2020-04-08T06:49:53Z",
"git_url": "git://github.com/preactjs/preact-router.git",
"ssh_url": "git@github.com:preactjs/preact-router.git",
"clone_url": "https://github.com/preactjs/preact-router.git",
"svn_url": "https://github.com/preactjs/preact-router",
"homepage": "http://npm.im/preact-router",
"size": 626,
"stargazers_count": 691,
"watchers_count": 691,
"language": "JavaScript",
"has_issues": true,
"has_projects": false,
"has_downloads": true,
"has_wiki": false,
"has_pages": false,
"forks_count": 131,
"mirror_url": null,
"archived": false,
"disabled": false,
"open_issues_count": 69,
"license": {
"key": "mit",
"name": "MIT License",
"spdx_id": "MIT",
"url": "https://api.github.com/licenses/mit",
"node_id": "MDc6TGljZW5zZTEz"
},
"forks": 131,
"open_issues": 69,
"watchers": 691,
"default_branch": "master",
"score": 1.0
},
{
"id": 82581631,
"node_id": "MDEwOlJlcG9zaXRvcnk4MjU4MTYzMQ==",
"name": "preact-material-components",
"full_name": "prateekbh/preact-material-components",
"private": false,
"owner": {
"login": "prateekbh",
"id": 5960497,
"node_id": "MDQ6VXNlcjU5NjA0OTc=",
"avatar_url": "https://avatars2.githubusercontent.com/u/5960497?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/prateekbh",
"html_url": "https://github.com/prateekbh",
"followers_url": "https://api.github.com/users/prateekbh/followers",
"following_url": "https://api.github.com/users/prateekbh/following{/other_user}",
"gists_url": "https://api.github.com/users/prateekbh/gists{/gist_id}",
"starred_url": "https://api.github.com/users/prateekbh/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/prateekbh/subscriptions",
"organizations_url": "https://api.github.com/users/prateekbh/orgs",
"repos_url": "https://api.github.com/users/prateekbh/repos",
"events_url": "https://api.github.com/users/prateekbh/events{/privacy}",
"received_events_url": "https://api.github.com/users/prateekbh/received_events",
"type": "User",
"site_admin": false
},
"html_url": "https://github.com/prateekbh/preact-material-components",
"description": "preact wrapper for \"Material Components for the web\"",
"fork": false,
"url": "https://api.github.com/repos/prateekbh/preact-material-components",
"forks_url": "https://api.github.com/repos/prateekbh/preact-material-components/forks",
"keys_url": "https://api.github.com/repos/prateekbh/preact-material-components/keys{/key_id}",
"collaborators_url": "https://api.github.com/repos/prateekbh/preact-material-components/collaborators{/collaborator}",
"teams_url": "https://api.github.com/repos/prateekbh/preact-material-components/teams",
"hooks_url": "https://api.github.com/repos/prateekbh/preact-material-components/hooks",
"issue_events_url": "https://api.github.com/repos/prateekbh/preact-material-components/issues/events{/number}",
"events_url": "https://api.github.com/repos/prateekbh/preact-material-components/events",
"assignees_url": "https://api.github.com/repos/prateekbh/preact-material-components/assignees{/user}",
"branches_url": "https://api.github.com/repos/prateekbh/preact-material-components/branches{/branch}",
"tags_url": "https://api.github.com/repos/prateekbh/preact-material-components/tags",
"blobs_url": "https://api.github.com/repos/prateekbh/preact-material-components/git/blobs{/sha}",
"git_tags_url": "https://api.github.com/repos/prateekbh/preact-material-components/git/tags{/sha}",
"git_refs_url": "https://api.github.com/repos/prateekbh/preact-material-components/git/refs{/sha}",
"trees_url": "https://api.github.com/repos/prateekbh/preact-material-components/git/trees{/sha}",
"statuses_url": "https://api.github.com/repos/prateekbh/preact-material-components/statuses/{sha}",
"languages_url": "https://api.github.com/repos/prateekbh/preact-material-components/languages",
"stargazers_url": "https://api.github.com/repos/prateekbh/preact-material-components/stargazers",
"contributors_url": "https://api.github.com/repos/prateekbh/preact-material-components/contributors",
"subscribers_url": "https://api.github.com/repos/prateekbh/preact-material-components/subscribers",
"subscription_url": "https://api.github.com/repos/prateekbh/preact-material-components/subscription",
"commits_url": "https://api.github.com/repos/prateekbh/preact-material-components/commits{/sha}",
"git_commits_url": "https://api.github.com/repos/prateekbh/preact-material-components/git/commits{/sha}",
"comments_url": "https://api.github.com/repos/prateekbh/preact-material-components/comments{/number}",
"issue_comment_url": "https://api.github.com/repos/prateekbh/preact-material-components/issues/comments{/number}",
"contents_url": "https://api.github.com/repos/prateekbh/preact-material-components/contents/{+path}",
"compare_url": "https://api.github.com/repos/prateekbh/preact-material-components/compare/{base}...{head}",
"merges_url": "https://api.github.com/repos/prateekbh/preact-material-components/merges",
"archive_url": "https://api.github.com/repos/prateekbh/preact-material-components/{archive_format}{/ref}",
"downloads_url": "https://api.github.com/repos/prateekbh/preact-material-components/downloads",
"issues_url": "https://api.github.com/repos/prateekbh/preact-material-components/issues{/number}",
"pulls_url": "https://api.github.com/repos/prateekbh/preact-material-components/pulls{/number}",
"milestones_url": "https://api.github.com/repos/prateekbh/preact-material-components/milestones{/number}",
"notifications_url": "https://api.github.com/repos/prateekbh/preact-material-components/notifications{?since,all,participating}",
"labels_url": "https://api.github.com/repos/prateekbh/preact-material-components/labels{/name}",
"releases_url": "https://api.github.com/repos/prateekbh/preact-material-components/releases{/id}",
"deployments_url": "https://api.github.com/repos/prateekbh/preact-material-components/deployments",
"created_at": "2017-02-20T17:01:45Z",
"updated_at": "2020-05-05T18:50:59Z",
"pushed_at": "2020-04-16T05:07:32Z",
"git_url": "git://github.com/prateekbh/preact-material-components.git",
"ssh_url": "git@github.com:prateekbh/preact-material-components.git",
"clone_url": "https://github.com/prateekbh/preact-material-components.git",
"svn_url": "https://github.com/prateekbh/preact-material-components",
"homepage": "https://material.preactjs.com",
"size": 95695,
"stargazers_count": 509,
"watchers_count": 509,
"language": "TypeScript",
"has_issues": true,
"has_projects": true,
"has_downloads": true,
"has_wiki": true,
"has_pages": false,
"forks_count": 85,
"mirror_url": null,
"archived": false,
"disabled": false,
"open_issues_count": 47,
"license": {
"key": "mit",
"name": "MIT License",
"spdx_id": "MIT",
"url": "https://api.github.com/licenses/mit",
"node_id": "MDc6TGljZW5zZTEz"
},
"forks": 85,
"open_issues": 47,
"watchers": 509,
"default_branch": "master",
"score": 1.0
},
{
"id": 34381195,
"node_id": "MDEwOlJlcG9zaXRvcnkzNDM4MTE5NQ==",
"name": "jsxstyle",
"full_name": "jsxstyle/jsxstyle",
"private": false,
"owner": {
"login": "jsxstyle",
"id": 29987079,
"node_id": "MDEyOk9yZ2FuaXphdGlvbjI5OTg3MDc5",
"avatar_url": "https://avatars0.githubusercontent.com/u/29987079?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/jsxstyle",
"html_url": "https://github.com/jsxstyle",
"followers_url": "https://api.github.com/users/jsxstyle/followers",
"following_url": "https://api.github.com/users/jsxstyle/following{/other_user}",
"gists_url": "https://api.github.com/users/jsxstyle/gists{/gist_id}",
"starred_url": "https://api.github.com/users/jsxstyle/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/jsxstyle/subscriptions",
"organizations_url": "https://api.github.com/users/jsxstyle/orgs",
"repos_url": "https://api.github.com/users/jsxstyle/repos",
"events_url": "https://api.github.com/users/jsxstyle/events{/privacy}",
"received_events_url": "https://api.github.com/users/jsxstyle/received_events",
"type": "Organization",
"site_admin": false
},
"html_url": "https://github.com/jsxstyle/jsxstyle",
"description": "Inline style system for React and Preact",
"fork": false,
"url": "https://api.github.com/repos/jsxstyle/jsxstyle",
"forks_url": "https://api.github.com/repos/jsxstyle/jsxstyle/forks",
"keys_url": "https://api.github.com/repos/jsxstyle/jsxstyle/keys{/key_id}",
"collaborators_url": "https://api.github.com/repos/jsxstyle/jsxstyle/collaborators{/collaborator}",
"teams_url": "https://api.github.com/repos/jsxstyle/jsxstyle/teams",
"hooks_url": "https://api.github.com/repos/jsxstyle/jsxstyle/hooks",
"issue_events_url": "https://api.github.com/repos/jsxstyle/jsxstyle/issues/events{/number}",
"events_url": "https://api.github.com/repos/jsxstyle/jsxstyle/events",
"assignees_url": "https://api.github.com/repos/jsxstyle/jsxstyle/assignees{/user}",
"branches_url": "https://api.github.com/repos/jsxstyle/jsxstyle/branches{/branch}",
"tags_url": "https://api.github.com/repos/jsxstyle/jsxstyle/tags",
"blobs_url": "https://api.github.com/repos/jsxstyle/jsxstyle/git/blobs{/sha}",
"git_tags_u
gitextract_ah3xfmck/ ├── .editorconfig ├── .eslintrc ├── .flowconfig ├── .gitignore ├── .npmignore ├── .prettierrc ├── .travis.yml ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── babel.config.js ├── bundlesize.config.json ├── docs/ │ └── HOW_IT_WORKS.md ├── example/ │ ├── App.js │ ├── App.scss │ ├── Logos.js │ ├── common/ │ │ └── ReactCredit.js │ ├── concurrent-mode/ │ │ ├── fakeApi.js │ │ └── index.js │ ├── context-api/ │ │ └── index.js │ ├── error-boundaries/ │ │ └── index.js │ ├── food-app/ │ │ ├── food-app.css │ │ ├── food-menu.json │ │ ├── mobx/ │ │ │ ├── App.js │ │ │ ├── Comps.js │ │ │ ├── index.js │ │ │ └── mobx.js │ │ ├── react-query/ │ │ │ ├── App.js │ │ │ ├── Comps.js │ │ │ ├── hooks.js │ │ │ ├── index.js │ │ │ └── zustand.js │ │ ├── redux/ │ │ │ ├── App.js │ │ │ ├── Comps.js │ │ │ ├── index.js │ │ │ └── redux.js │ │ └── utils.js │ ├── hooks/ │ │ └── index.js │ ├── index.html │ ├── index.js │ ├── lazy-component/ │ │ └── index.js │ ├── portals/ │ │ └── index.js │ ├── sierpinski-triangle/ │ │ └── index.js │ ├── suspense-list/ │ │ ├── fakeApi.js │ │ └── index.js │ ├── svg-chart/ │ │ └── index.js │ ├── third-party-component/ │ │ └── index.js │ ├── time-slicing/ │ │ ├── Chart.js │ │ ├── Clock.js │ │ └── index.js │ ├── todo-list/ │ │ └── index.js │ ├── use-deferred-value/ │ │ ├── MySlowList.js │ │ └── index.js │ └── use-deferred-value-suspense/ │ ├── fakeApi.js │ └── index.js ├── example_old/ │ ├── App.js │ ├── ErrorBoundaryExample.js │ ├── RefsExample.js │ ├── SVGExample.js │ ├── TodoList.js │ ├── UnMountAtNode.js │ ├── UseStateExample.js │ ├── concurrentApp.js │ ├── context.js │ ├── createPortalExample.js │ ├── data.json │ ├── fakeApi.js │ ├── fakeApiSuspenseList.js │ ├── friends.json │ ├── index.html │ ├── index.js │ ├── lazySuspenseExample.js │ ├── suspenseExamples.js │ └── suspenseListExample.js ├── jest.config.js ├── package.json ├── rollup.config.js ├── src/ │ ├── Children.js │ ├── Component.js │ ├── Suspense.js │ ├── TagNode.js │ ├── TemplateNode.js │ ├── TemplateTag.js │ ├── __tests__/ │ │ ├── BrahmosES6class.test.js │ │ ├── BrahmosPureComponent.test.js │ │ ├── __snapshots__/ │ │ │ └── listRendering.test.js.snap │ │ ├── attributes.test.js │ │ ├── children_apis.test.js │ │ ├── context.test.js │ │ ├── jest.setup.js │ │ ├── listRendering.test.js │ │ ├── memo.test.js │ │ ├── setState.test.js │ │ ├── testUtils.js │ │ └── utils.test.js │ ├── brahmos.js │ ├── brahmosNode.js │ ├── circularDep.js │ ├── configs.js │ ├── createContext.js │ ├── createElement.js │ ├── createPortal.js │ ├── effectLoop.js │ ├── fiber.js │ ├── flow.types.js │ ├── functionalComponentInstance.js │ ├── helpers/ │ │ └── shallowEqual.js │ ├── hooks.js │ ├── index.js │ ├── memo.js │ ├── parseChildren.js │ ├── processArrayFiber.js │ ├── processComponentFiber.js │ ├── processTagFiber.js │ ├── processTextFiber.js │ ├── reRender.js │ ├── reactEvents.js │ ├── refs.js │ ├── render.js │ ├── scheduler.js │ ├── tags.js │ ├── tearDown.js │ ├── transitionUtils.js │ ├── unmountComponentAtNode.js │ ├── updateAttribute.js │ ├── updateUtils.js │ ├── utils.js │ └── workLoop.js ├── tsconfig.json └── webpack.config.js
SYMBOL INDEX (508 symbols across 94 files)
FILE: example/App.js
function App (line 102) | function App() {
FILE: example/Logos.js
function GithubLogo (line 3) | function GithubLogo(props) {
function BrahmosLogo (line 14) | function BrahmosLogo(props) {
FILE: example/common/ReactCredit.js
function ReactCredit (line 1) | function ReactCredit({ name, link }) {
FILE: example/concurrent-mode/fakeApi.js
function fetchProfileData (line 1) | function fetchProfileData(userId) {
function wrapPromise (line 15) | function wrapPromise(promise) {
function fetchUser (line 41) | function fetchUser(userId) {
function fetchPosts (line 74) | function fetchPosts(userId) {
FILE: example/concurrent-mode/index.js
function getNextId (line 9) | function getNextId(id) {
function ProfileDetails (line 15) | function ProfileDetails({ resource }) {
function ProfileTimeline (line 20) | function ProfileTimeline({ resource }) {
function ProfilePageWithoutTransition (line 31) | function ProfilePageWithoutTransition() {
function ProfilePageWithTransition (line 68) | function ProfilePageWithTransition() {
function ProfilePageWithTransitionPreferred (line 111) | function ProfilePageWithTransitionPreferred() {
function App (line 153) | function App() {
FILE: example/context-api/index.js
class ContextStaticProperty (line 6) | class ContextStaticProperty extends Component {
method render (line 7) | render() {
function ContextConsumer (line 14) | function ContextConsumer() {
function UseContext (line 18) | function UseContext() {
function ContextExample (line 24) | function ContextExample() {
FILE: example/error-boundaries/index.js
class ErrorBoundary (line 6) | class ErrorBoundary extends Component {
method constructor (line 7) | constructor(props) {
method getDerivedStateFromError (line 12) | static getDerivedStateFromError(error) {
method componentDidCatch (line 17) | componentDidCatch(error, errorInfo) {
method render (line 25) | render() {
class BuggyCounter (line 44) | class BuggyCounter extends Brahmos.Component {
method constructor (line 45) | constructor(props) {
method handleClick (line 51) | handleClick() {
method render (line 57) | render() {
function ErrorBoundaryExample (line 74) | function ErrorBoundaryExample() {
FILE: example/food-app/mobx/App.js
function handleVegToggle (line 12) | function handleVegToggle() {
function useLoadFoodData (line 45) | function useLoadFoodData() {
FILE: example/food-app/mobx/Comps.js
function handleIncrement (line 10) | function handleIncrement() {
function handleDecrement (line 14) | function handleDecrement() {
function Message (line 89) | function Message(props) {
function IconPlus (line 142) | function IconPlus() {
function IconMinus (line 164) | function IconMinus() {
FILE: example/food-app/mobx/index.js
function ReduxExample (line 8) | function ReduxExample() {
FILE: example/food-app/mobx/mobx.js
class RootStore (line 4) | class RootStore {
method constructor (line 8) | constructor() {
method changeDiet (line 12) | changeDiet() {
method loadMenu (line 17) | loadMenu(menuList) {
method addToCart (line 27) | addToCart(item) {
method removeFromCart (line 31) | removeFromCart(item) {
method menuList (line 37) | get menuList() {
method cartPrice (line 45) | get cartPrice() {
function useRootStore (line 59) | function useRootStore() {
FILE: example/food-app/react-query/App.js
function App (line 7) | function App() {
FILE: example/food-app/react-query/Comps.js
function MenuItem (line 6) | function MenuItem(props) {
function PureMenuList (line 78) | function PureMenuList(props) {
function Message (line 92) | function Message(props) {
function PaymentFooter (line 124) | function PaymentFooter() {
function IconPlus (line 144) | function IconPlus() {
function IconMinus (line 166) | function IconMinus() {
FILE: example/food-app/react-query/hooks.js
function useLoadFoodQuery (line 7) | function useLoadFoodQuery() {
function useMenuList (line 12) | function useMenuList() {
function useCartPrice (line 32) | function useCartPrice() {
FILE: example/food-app/react-query/index.js
function ReduxExample (line 16) | function ReduxExample() {
FILE: example/food-app/react-query/zustand.js
method addToCart (line 10) | addToCart(itemId) {
method removeFromCart (line 28) | removeFromCart(itemId) {
FILE: example/food-app/redux/App.js
function App (line 8) | function App() {
function useLoadFoodData (line 54) | function useLoadFoodData() {
function selectorMenu (line 78) | function selectorMenu(state) {
FILE: example/food-app/redux/Comps.js
function MenuItem (line 7) | function MenuItem(props) {
function PureMenuList (line 91) | function PureMenuList(props) {
function Message (line 105) | function Message(props) {
function selectorCartPrice (line 137) | function selectorCartPrice(state) {
function PaymentFooter (line 153) | function PaymentFooter() {
function IconPlus (line 173) | function IconPlus() {
function IconMinus (line 195) | function IconMinus() {
FILE: example/food-app/redux/index.js
function ReduxExample (line 9) | function ReduxExample() {
FILE: example/food-app/redux/redux.js
constant ACTIONS (line 3) | const ACTIONS = {
function foodReducer (line 20) | function foodReducer(state = initialState, action) {
function createReduxStore (line 100) | function createReduxStore() {
FILE: example/food-app/utils.js
function loadFoodData (line 3) | async function loadFoodData() {
FILE: example/hooks/index.js
function useInterval (line 4) | function useInterval(callback, delay) {
function Counter (line 24) | function Counter() {
FILE: example/index.js
function RootApp (line 6) | function RootApp() {
FILE: example/lazy-component/index.js
function LazyExample (line 11) | function LazyExample() {
FILE: example/portals/index.js
function Modal (line 3) | function Modal({ onClose }) {
function CreatePortalExample (line 33) | function CreatePortalExample() {
FILE: example/sierpinski-triangle/index.js
class Dot (line 26) | class Dot extends Component {
method constructor (line 27) | constructor() {
method enter (line 32) | enter() {
method leave (line 38) | leave() {
method render (line 44) | render() {
class SierpinskiTriangle (line 65) | class SierpinskiTriangle extends Component {
method shouldComponentUpdate (line 66) | shouldComponentUpdate(nextProps) {
method render (line 72) | render() {
class Toggle (line 106) | class Toggle extends Component {
method constructor (line 107) | constructor(props) {
method onChange (line 112) | onChange(event) {
method render (line 116) | render() {
class SierpinskiWrapper (line 133) | class SierpinskiWrapper extends Component {
method constructor (line 134) | constructor() {
method componentDidMount (line 144) | componentDidMount() {
method tick (line 148) | tick() {
method onTimeSlicingChange (line 160) | onTimeSlicingChange(value) {
method componentWillUnmount (line 164) | componentWillUnmount() {
method render (line 168) | render() {
class DemoApp (line 198) | class DemoApp extends Component {
method constructor (line 199) | constructor() {
method componentDidMount (line 207) | componentDidMount() {
method componentWillUnmount (line 211) | componentWillUnmount() {
method updateElapsed (line 215) | updateElapsed() {
method render (line 227) | render() {
FILE: example/suspense-list/fakeApi.js
function fetchProfileData (line 1) | function fetchProfileData() {
function wrapPromise (line 16) | function wrapPromise(promise) {
function fetchUser (line 42) | function fetchUser() {
function fetchPosts (line 69) | function fetchPosts() {
function fetchTrivia (line 80) | function fetchTrivia() {
FILE: example/suspense-list/index.js
function ProfileDetails (line 10) | function ProfileDetails({ resource }) {
function ProfileTimeline (line 15) | function ProfileTimeline({ resource }) {
function ProfileTrivia (line 26) | function ProfileTrivia({ resource }) {
function ProfilePage (line 40) | function ProfilePage({ revealOrder = 'forwards', tail }) {
function App (line 71) | function App() {
FILE: example/svg-chart/index.js
function Rect (line 3) | function Rect({ height, index }) {
function Chart (line 16) | function Chart({ data }) {
class SVGExample (line 26) | class SVGExample extends Component {
method _shuffuleArray (line 31) | _shuffuleArray(array) {
method render (line 44) | render() {
FILE: example/third-party-component/index.js
class RechartExample (line 49) | class RechartExample extends PureComponent {
method render (line 50) | render() {
FILE: example/time-slicing/Chart.js
class Charts (line 14) | class Charts extends PureComponent {
method render (line 15) | render() {
FILE: example/time-slicing/Clock.js
constant SPEED (line 3) | const SPEED = 0.003 / Math.PI;
constant FRAMES (line 4) | const FRAMES = 10;
class Clock (line 6) | class Clock extends PureComponent {
method componentDidMount (line 64) | componentDidMount() {
method componentDidUpdate (line 71) | componentDidUpdate() {
method componentWillUnmount (line 75) | componentWillUnmount() {
method render (line 87) | render() {
FILE: example/time-slicing/index.js
class App (line 11) | class App extends PureComponent {
method getStreamData (line 20) | getStreamData(input) {
method componentDidMount (line 38) | componentDidMount() {
method renderOption (line 84) | renderOption(strategy, label) {
method render (line 119) | render() {
FILE: example/todo-list/index.js
function shuffleArray (line 4) | function shuffleArray(array) {
function randomColor (line 13) | function randomColor() {
class TodoList (line 19) | class TodoList extends Component {
method componentDidUpdate (line 27) | componentDidUpdate(prevProps, prevState) {
method render (line 59) | render() {
FILE: example/use-deferred-value-suspense/fakeApi.js
function fetchProfileData (line 1) | function fetchProfileData(userId) {
function wrapPromise (line 15) | function wrapPromise(promise) {
function fetchUser (line 41) | function fetchUser(userId) {
function fetchPosts (line 74) | function fetchPosts(userId) {
FILE: example/use-deferred-value-suspense/index.js
function getNextId (line 10) | function getNextId(id) {
function App (line 16) | function App() {
function ProfilePage (line 62) | function ProfilePage({ resource }) {
function ProfileDetails (line 76) | function ProfileDetails({ resource }) {
function ProfileTimeline (line 81) | function ProfileTimeline({ isStale, resource }) {
FILE: example/use-deferred-value/MySlowList.js
function ListItem (line 5) | function ListItem({ children }) {
class MySlowList (line 19) | class MySlowList extends PureComponent {
method render (line 20) | render() {
FILE: example/use-deferred-value/index.js
function Toggle (line 10) | function Toggle({ concurrentMode, setConcurrentMode }) {
function App (line 26) | function App() {
FILE: example_old/App.js
function shuffle (line 12) | function shuffle(array) {
function OldApp (line 33) | function OldApp() {
function Div (line 73) | function Div() {
function Div2 (line 77) | function Div2({ length, list }) {
class AppBase (line 87) | class AppBase extends Component {
method render (line 93) | render() {
function App (line 117) | function App() {
FILE: example_old/ErrorBoundaryExample.js
class ErrorBoundary (line 3) | class ErrorBoundary extends Brahmos.Component {
method constructor (line 4) | constructor(props) {
method getDerivedStateFromError (line 9) | static getDerivedStateFromError(error) {
method componentDidCatch (line 13) | componentDidCatch(error, errorInfo) {
method render (line 22) | render() {
class BuggyCounter (line 41) | class BuggyCounter extends Brahmos.Component {
method constructor (line 42) | constructor(props) {
method handleClick (line 48) | handleClick() {
method render (line 54) | render() {
function ErrorBoundaryExample (line 63) | function ErrorBoundaryExample() {
FILE: example_old/RefsExample.js
class Child (line 3) | class Child extends Component {
method logSomething (line 4) | logSomething() {
method render (line 8) | render() {
class RefsExample (line 17) | class RefsExample extends Component {
method constructor (line 18) | constructor() {
method render (line 33) | render() {
FILE: example_old/SVGExample.js
function Path (line 3) | function Path() {
function Image (line 13) | function Image() {
function Chart (line 86) | function Chart({ data }) {
class SVGExample (line 103) | class SVGExample extends Component {
method _shuffuleArray (line 108) | _shuffuleArray(array) {
method render (line 121) | render() {
FILE: example_old/TodoList.js
class TodoList (line 3) | class TodoList extends Component {
method componentDidMount (line 24) | componentDidMount() {
method render (line 28) | render() {
FILE: example_old/UnMountAtNode.js
class UnMountAtNode (line 3) | class UnMountAtNode extends Component {
method componentWillUnmount (line 10) | componentWillUnmount() {
method render (line 14) | render() {
FILE: example_old/UseStateExample.js
function UseStateExample (line 4) | function UseStateExample() {
FILE: example_old/concurrentApp.js
function shuffle (line 8) | function shuffle(array) {
function duplicateData (line 29) | function duplicateData(data, count) {
class Result (line 39) | class Result extends PureComponent {
method render (line 40) | render() {
class App (line 94) | class App extends Component {
method componentDidMount (line 99) | componentDidMount() {
method componentDidUpdate (line 110) | componentDidUpdate() {
method render (line 130) | render(props) {
FILE: example_old/context.js
class ContextStaticProperty (line 6) | class ContextStaticProperty extends Component {
method render (line 7) | render() {
function ContextConsumer (line 14) | function ContextConsumer() {
function UseContext (line 18) | function UseContext() {
function ContextExample (line 24) | function ContextExample() {
FILE: example_old/createPortalExample.js
class Child (line 3) | class Child extends Component {
method componentWillUnmount (line 4) | componentWillUnmount() {
method render (line 8) | render() {
function CreatePortalExample (line 13) | function CreatePortalExample() {
FILE: example_old/fakeApi.js
function fetchProfileData (line 1) | function fetchProfileData() {
function wrapPromise (line 16) | function wrapPromise(promise) {
function fetchUser (line 46) | function fetchUser() {
function fetchPosts (line 73) | function fetchPosts() {
function fetchTrivia (line 84) | function fetchTrivia() {
FILE: example_old/fakeApiSuspenseList.js
function fetchProfileData (line 1) | function fetchProfileData() {
function wrapPromise (line 16) | function wrapPromise(promise) {
function fetchUser (line 42) | function fetchUser() {
function fetchPosts (line 69) | function fetchPosts() {
function fetchTrivia (line 80) | function fetchTrivia() {
FILE: example_old/lazySuspenseExample.js
function LazySuspenseExample (line 14) | function LazySuspenseExample() {
FILE: example_old/suspenseExamples.js
function App (line 7) | function App() {
function HomePage (line 25) | function HomePage({ showProfile }) {
function Separator (line 34) | function Separator() {
function ProfilePage (line 38) | function ProfilePage() {
function ProfileDetails (line 80) | function ProfileDetails({ resource }) {
function ProfileTimeline (line 85) | function ProfileTimeline({ resource }) {
function ProfileTrivia (line 96) | function ProfileTrivia({ resource }) {
function Button (line 110) | function Button({ children, onClick }) {
FILE: example_old/suspenseListExample.js
function App (line 7) | function App() {
function ProfilePage (line 11) | function ProfilePage({ resource }) {
function ProfileDetails (line 29) | function ProfileDetails({ resource }) {
function ProfileTimeline (line 34) | function ProfileTimeline({ resource }) {
function ProfileTrivia (line 45) | function ProfileTrivia({ resource }) {
FILE: src/Children.js
function isPlaceholderTagNode (line 8) | function isPlaceholderTagNode(children: BrahmosNode): boolean {
function flattenChildren (line 19) | function flattenChildren(children) {
function only (line 91) | function only(children: any) {
function count (line 96) | function count(children: any): number {
function isValidElement (line 109) | function isValidElement(node: any) {
FILE: src/Component.js
class PureComponent (line 85) | class PureComponent extends Component implements PureComponentInstance {
FILE: src/Suspense.js
function resetSiblingFibers (line 60) | function resetSiblingFibers(fiber: Fiber): Fiber {
function getClosestSuspenseListManager (line 92) | function getClosestSuspenseListManager(manager) {
function getSuspenseManager (line 100) | function getSuspenseManager(fiber: Fiber, transition: AnyTransition): Su...
function markComponentDirty (line 120) | function markComponentDirty(component: SuspenseInstance | SuspenseListIn...
function markManagerDirty (line 124) | function markManagerDirty(manager) {
class SuspenseManager (line 132) | class SuspenseManager {
method constructor (line 151) | constructor(fiber, transition) {
method recordChildSuspense (line 169) | recordChildSuspense() {
method addRootToProcess (line 179) | addRootToProcess() {
method suspend (line 185) | suspend(suspender) {
method handleSuspense (line 192) | handleSuspense() {
method isUnresolved (line 204) | isUnresolved() {
method shouldShowFallback (line 214) | shouldShowFallback() {
method shouldRenderChildren (line 254) | shouldRenderChildren() {
method resolve (line 296) | resolve(resolvedWithSuspender) {
method getChildrenSuspenders (line 364) | getChildrenSuspenders() {
method handleSuspenseList (line 377) | handleSuspenseList() {
function getActiveTransition (line 430) | function getActiveTransition(component: SuspenseList): AnyTransition {
class SuspenseList (line 449) | class SuspenseList extends Component {
method constructor (line 450) | constructor(props: SuspenseListProps) {
method render (line 455) | render() {
class Suspense (line 460) | class Suspense extends Component implements SuspenseInstance {
method constructor (line 461) | constructor(props: SuspenseProps) {
method handleSuspender (line 467) | handleSuspender(suspender: Promise<any>, suspenseFiber: Fiber) {
method render (line 495) | render() {
FILE: src/TagNode.js
function getTagNode (line 12) | function getTagNode(node: BrahmosNode, isSvgPart: boolean): TagNodeType {
FILE: src/TemplateNode.js
function isBrahmosCommentNode (line 7) | function isBrahmosCommentNode(node: ?Node): boolean {
class TemplateNodeType (line 11) | class TemplateNode implements TemplateNodeType {
method constructor (line 22) | constructor(templateResult: TemplateTagType, isSvgPart: boolean) {
method createNode (line 40) | createNode(isSvgPart: boolean): DocumentFragment {
method getParts (line 47) | getParts(): Array<Part> {
method patchParts (line 122) | patchParts(nodePart: NodePart) {
FILE: src/TemplateTag.js
function decodePartMeta (line 20) | function decodePartMeta(partMetaCode: string): Array<PartMeta> {
FILE: src/__tests__/BrahmosES6class.test.js
method getName (line 26) | getName() {
method render (line 30) | render() {
function test (line 39) | function test(element, expectedTag, expectedClassName) {
class Foo (line 48) | class Foo extends Brahmos.Component {}
method render (line 54) | render() {
method constructor (line 64) | constructor(props) {
method render (line 69) | render() {
method constructor (line 78) | constructor(props) {
method changeState (line 83) | changeState() {
method render (line 87) | render() {
method getDerivedStateFromProps (line 103) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 110) | render() {
method getDerivedStateFromProps (line 124) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 130) | render() {
method getDerivedStateFromProps (line 143) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 152) | render() {
method constructor (line 162) | constructor() {
method render (line 167) | render() {
method constructor (line 176) | constructor(props) {
method handleClick (line 181) | handleClick(callback) {
method render (line 185) | render() {
method constructor (line 196) | constructor(props) {
method handleClick (line 201) | handleClick() {
method render (line 205) | render() {
method constructor (line 216) | constructor() {
method componentDidMount (line 221) | componentDidMount() {
method shouldComponentUpdate (line 225) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 230) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 234) | componentWillUnmount() {
method render (line 238) | render() {
method constructor (line 284) | constructor(props) {
method handleClick (line 289) | handleClick(callback) {
method render (line 294) | render() {
class Foo (line 53) | class Foo extends Brahmos.Component {
method render (line 54) | render() {
method constructor (line 64) | constructor(props) {
method render (line 69) | render() {
method constructor (line 78) | constructor(props) {
method changeState (line 83) | changeState() {
method render (line 87) | render() {
method getDerivedStateFromProps (line 103) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 110) | render() {
method getDerivedStateFromProps (line 124) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 130) | render() {
method getDerivedStateFromProps (line 143) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 152) | render() {
method constructor (line 162) | constructor() {
method render (line 167) | render() {
method constructor (line 176) | constructor(props) {
method handleClick (line 181) | handleClick(callback) {
method render (line 185) | render() {
method constructor (line 196) | constructor(props) {
method handleClick (line 201) | handleClick() {
method render (line 205) | render() {
method constructor (line 216) | constructor() {
method componentDidMount (line 221) | componentDidMount() {
method shouldComponentUpdate (line 225) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 230) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 234) | componentWillUnmount() {
method render (line 238) | render() {
method constructor (line 284) | constructor(props) {
method handleClick (line 289) | handleClick(callback) {
method render (line 294) | render() {
class Foo (line 63) | class Foo extends Brahmos.Component {
method render (line 54) | render() {
method constructor (line 64) | constructor(props) {
method render (line 69) | render() {
method constructor (line 78) | constructor(props) {
method changeState (line 83) | changeState() {
method render (line 87) | render() {
method getDerivedStateFromProps (line 103) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 110) | render() {
method getDerivedStateFromProps (line 124) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 130) | render() {
method getDerivedStateFromProps (line 143) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 152) | render() {
method constructor (line 162) | constructor() {
method render (line 167) | render() {
method constructor (line 176) | constructor(props) {
method handleClick (line 181) | handleClick(callback) {
method render (line 185) | render() {
method constructor (line 196) | constructor(props) {
method handleClick (line 201) | handleClick() {
method render (line 205) | render() {
method constructor (line 216) | constructor() {
method componentDidMount (line 221) | componentDidMount() {
method shouldComponentUpdate (line 225) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 230) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 234) | componentWillUnmount() {
method render (line 238) | render() {
method constructor (line 284) | constructor(props) {
method handleClick (line 289) | handleClick(callback) {
method render (line 294) | render() {
class Foo (line 77) | class Foo extends Brahmos.Component {
method render (line 54) | render() {
method constructor (line 64) | constructor(props) {
method render (line 69) | render() {
method constructor (line 78) | constructor(props) {
method changeState (line 83) | changeState() {
method render (line 87) | render() {
method getDerivedStateFromProps (line 103) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 110) | render() {
method getDerivedStateFromProps (line 124) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 130) | render() {
method getDerivedStateFromProps (line 143) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 152) | render() {
method constructor (line 162) | constructor() {
method render (line 167) | render() {
method constructor (line 176) | constructor(props) {
method handleClick (line 181) | handleClick(callback) {
method render (line 185) | render() {
method constructor (line 196) | constructor(props) {
method handleClick (line 201) | handleClick() {
method render (line 205) | render() {
method constructor (line 216) | constructor() {
method componentDidMount (line 221) | componentDidMount() {
method shouldComponentUpdate (line 225) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 230) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 234) | componentWillUnmount() {
method render (line 238) | render() {
method constructor (line 284) | constructor(props) {
method handleClick (line 289) | handleClick(callback) {
method render (line 294) | render() {
class Foo (line 100) | class Foo extends Brahmos.Component {
method render (line 54) | render() {
method constructor (line 64) | constructor(props) {
method render (line 69) | render() {
method constructor (line 78) | constructor(props) {
method changeState (line 83) | changeState() {
method render (line 87) | render() {
method getDerivedStateFromProps (line 103) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 110) | render() {
method getDerivedStateFromProps (line 124) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 130) | render() {
method getDerivedStateFromProps (line 143) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 152) | render() {
method constructor (line 162) | constructor() {
method render (line 167) | render() {
method constructor (line 176) | constructor(props) {
method handleClick (line 181) | handleClick(callback) {
method render (line 185) | render() {
method constructor (line 196) | constructor(props) {
method handleClick (line 201) | handleClick() {
method render (line 205) | render() {
method constructor (line 216) | constructor() {
method componentDidMount (line 221) | componentDidMount() {
method shouldComponentUpdate (line 225) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 230) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 234) | componentWillUnmount() {
method render (line 238) | render() {
method constructor (line 284) | constructor(props) {
method handleClick (line 289) | handleClick(callback) {
method render (line 294) | render() {
class Foo (line 118) | class Foo extends Brahmos.Component {
method render (line 54) | render() {
method constructor (line 64) | constructor(props) {
method render (line 69) | render() {
method constructor (line 78) | constructor(props) {
method changeState (line 83) | changeState() {
method render (line 87) | render() {
method getDerivedStateFromProps (line 103) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 110) | render() {
method getDerivedStateFromProps (line 124) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 130) | render() {
method getDerivedStateFromProps (line 143) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 152) | render() {
method constructor (line 162) | constructor() {
method render (line 167) | render() {
method constructor (line 176) | constructor(props) {
method handleClick (line 181) | handleClick(callback) {
method render (line 185) | render() {
method constructor (line 196) | constructor(props) {
method handleClick (line 201) | handleClick() {
method render (line 205) | render() {
method constructor (line 216) | constructor() {
method componentDidMount (line 221) | componentDidMount() {
method shouldComponentUpdate (line 225) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 230) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 234) | componentWillUnmount() {
method render (line 238) | render() {
method constructor (line 284) | constructor(props) {
method handleClick (line 289) | handleClick(callback) {
method render (line 294) | render() {
class Foo (line 138) | class Foo extends Brahmos.Component {
method render (line 54) | render() {
method constructor (line 64) | constructor(props) {
method render (line 69) | render() {
method constructor (line 78) | constructor(props) {
method changeState (line 83) | changeState() {
method render (line 87) | render() {
method getDerivedStateFromProps (line 103) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 110) | render() {
method getDerivedStateFromProps (line 124) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 130) | render() {
method getDerivedStateFromProps (line 143) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 152) | render() {
method constructor (line 162) | constructor() {
method render (line 167) | render() {
method constructor (line 176) | constructor(props) {
method handleClick (line 181) | handleClick(callback) {
method render (line 185) | render() {
method constructor (line 196) | constructor(props) {
method handleClick (line 201) | handleClick() {
method render (line 205) | render() {
method constructor (line 216) | constructor() {
method componentDidMount (line 221) | componentDidMount() {
method shouldComponentUpdate (line 225) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 230) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 234) | componentWillUnmount() {
method render (line 238) | render() {
method constructor (line 284) | constructor(props) {
method handleClick (line 289) | handleClick(callback) {
method render (line 294) | render() {
class Foo (line 161) | class Foo extends Brahmos.Component {
method render (line 54) | render() {
method constructor (line 64) | constructor(props) {
method render (line 69) | render() {
method constructor (line 78) | constructor(props) {
method changeState (line 83) | changeState() {
method render (line 87) | render() {
method getDerivedStateFromProps (line 103) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 110) | render() {
method getDerivedStateFromProps (line 124) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 130) | render() {
method getDerivedStateFromProps (line 143) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 152) | render() {
method constructor (line 162) | constructor() {
method render (line 167) | render() {
method constructor (line 176) | constructor(props) {
method handleClick (line 181) | handleClick(callback) {
method render (line 185) | render() {
method constructor (line 196) | constructor(props) {
method handleClick (line 201) | handleClick() {
method render (line 205) | render() {
method constructor (line 216) | constructor() {
method componentDidMount (line 221) | componentDidMount() {
method shouldComponentUpdate (line 225) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 230) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 234) | componentWillUnmount() {
method render (line 238) | render() {
method constructor (line 284) | constructor(props) {
method handleClick (line 289) | handleClick(callback) {
method render (line 294) | render() {
class Foo (line 175) | class Foo extends Brahmos.Component {
method render (line 54) | render() {
method constructor (line 64) | constructor(props) {
method render (line 69) | render() {
method constructor (line 78) | constructor(props) {
method changeState (line 83) | changeState() {
method render (line 87) | render() {
method getDerivedStateFromProps (line 103) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 110) | render() {
method getDerivedStateFromProps (line 124) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 130) | render() {
method getDerivedStateFromProps (line 143) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 152) | render() {
method constructor (line 162) | constructor() {
method render (line 167) | render() {
method constructor (line 176) | constructor(props) {
method handleClick (line 181) | handleClick(callback) {
method render (line 185) | render() {
method constructor (line 196) | constructor(props) {
method handleClick (line 201) | handleClick() {
method render (line 205) | render() {
method constructor (line 216) | constructor() {
method componentDidMount (line 221) | componentDidMount() {
method shouldComponentUpdate (line 225) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 230) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 234) | componentWillUnmount() {
method render (line 238) | render() {
method constructor (line 284) | constructor(props) {
method handleClick (line 289) | handleClick(callback) {
method render (line 294) | render() {
class Foo (line 195) | class Foo extends Brahmos.Component {
method render (line 54) | render() {
method constructor (line 64) | constructor(props) {
method render (line 69) | render() {
method constructor (line 78) | constructor(props) {
method changeState (line 83) | changeState() {
method render (line 87) | render() {
method getDerivedStateFromProps (line 103) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 110) | render() {
method getDerivedStateFromProps (line 124) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 130) | render() {
method getDerivedStateFromProps (line 143) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 152) | render() {
method constructor (line 162) | constructor() {
method render (line 167) | render() {
method constructor (line 176) | constructor(props) {
method handleClick (line 181) | handleClick(callback) {
method render (line 185) | render() {
method constructor (line 196) | constructor(props) {
method handleClick (line 201) | handleClick() {
method render (line 205) | render() {
method constructor (line 216) | constructor() {
method componentDidMount (line 221) | componentDidMount() {
method shouldComponentUpdate (line 225) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 230) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 234) | componentWillUnmount() {
method render (line 238) | render() {
method constructor (line 284) | constructor(props) {
method handleClick (line 289) | handleClick(callback) {
method render (line 294) | render() {
class Foo (line 215) | class Foo extends Brahmos.Component {
method render (line 54) | render() {
method constructor (line 64) | constructor(props) {
method render (line 69) | render() {
method constructor (line 78) | constructor(props) {
method changeState (line 83) | changeState() {
method render (line 87) | render() {
method getDerivedStateFromProps (line 103) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 110) | render() {
method getDerivedStateFromProps (line 124) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 130) | render() {
method getDerivedStateFromProps (line 143) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 152) | render() {
method constructor (line 162) | constructor() {
method render (line 167) | render() {
method constructor (line 176) | constructor(props) {
method handleClick (line 181) | handleClick(callback) {
method render (line 185) | render() {
method constructor (line 196) | constructor(props) {
method handleClick (line 201) | handleClick() {
method render (line 205) | render() {
method constructor (line 216) | constructor() {
method componentDidMount (line 221) | componentDidMount() {
method shouldComponentUpdate (line 225) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 230) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 234) | componentWillUnmount() {
method render (line 238) | render() {
method constructor (line 284) | constructor(props) {
method handleClick (line 289) | handleClick(callback) {
method render (line 294) | render() {
class Outer (line 242) | class Outer extends Brahmos.Component {
method constructor (line 243) | constructor(props) {
method unmountFoo (line 250) | unmountFoo(callback) {
method render (line 259) | render() {
class Foo (line 283) | class Foo extends Brahmos.Component {
method render (line 54) | render() {
method constructor (line 64) | constructor(props) {
method render (line 69) | render() {
method constructor (line 78) | constructor(props) {
method changeState (line 83) | changeState() {
method render (line 87) | render() {
method getDerivedStateFromProps (line 103) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 110) | render() {
method getDerivedStateFromProps (line 124) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 130) | render() {
method getDerivedStateFromProps (line 143) | static getDerivedStateFromProps(nextProps, prevState) {
method render (line 152) | render() {
method constructor (line 162) | constructor() {
method render (line 167) | render() {
method constructor (line 176) | constructor(props) {
method handleClick (line 181) | handleClick(callback) {
method render (line 185) | render() {
method constructor (line 196) | constructor(props) {
method handleClick (line 201) | handleClick() {
method render (line 205) | render() {
method constructor (line 216) | constructor() {
method componentDidMount (line 221) | componentDidMount() {
method shouldComponentUpdate (line 225) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 230) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 234) | componentWillUnmount() {
method render (line 238) | render() {
method constructor (line 284) | constructor(props) {
method handleClick (line 289) | handleClick(callback) {
method render (line 294) | render() {
FILE: src/__tests__/BrahmosPureComponent.test.js
class Component (line 10) | class Component extends Brahmos.PureComponent {
method constructor (line 11) | constructor() {
method render (line 16) | render() {
method constructor (line 57) | constructor() {
method render (line 61) | render() {
class Component (line 56) | class Component extends Brahmos.PureComponent {
method constructor (line 11) | constructor() {
method render (line 16) | render() {
method constructor (line 57) | constructor() {
method render (line 61) | render() {
FILE: src/__tests__/attributes.test.js
function Test (line 13) | function Test(style) {
FILE: src/__tests__/listRendering.test.js
function TestComp (line 13) | function TestComp() {
function TestComp (line 31) | function TestComp({ items }) {
function TestComp (line 62) | function TestComp({ items }) {
function List (line 90) | function List({ items }) {
function TestComp (line 102) | function TestComp({ items }) {
FILE: src/__tests__/setState.test.js
class Child (line 10) | class Child extends Component {
method componentDidMount (line 15) | componentDidMount() {
method render (line 19) | render() {
class Parent (line 28) | class Parent extends Component {
method componentDidMount (line 33) | componentDidMount() {
method render (line 37) | render() {
class Test (line 56) | class Test extends Component {
method componentDidMount (line 61) | componentDidMount() {
method render (line 67) | render() {
method render (line 96) | render() {
method componentDidUpdate (line 123) | componentDidUpdate() {
method render (line 129) | render() {
class Test (line 85) | class Test extends Component {
method componentDidMount (line 61) | componentDidMount() {
method render (line 67) | render() {
method render (line 96) | render() {
method componentDidUpdate (line 123) | componentDidUpdate() {
method render (line 129) | render() {
class Test (line 118) | class Test extends Component {
method componentDidMount (line 61) | componentDidMount() {
method render (line 67) | render() {
method render (line 96) | render() {
method componentDidUpdate (line 123) | componentDidUpdate() {
method render (line 129) | render() {
FILE: src/__tests__/testUtils.js
function unmountAll (line 8) | function unmountAll() {
function renderNode (line 12) | function renderNode(node) {
function sleep (line 40) | function sleep(time) {
FILE: src/brahmos.js
function unstable_batchedUpdates (line 62) | function unstable_batchedUpdates(cb) {
FILE: src/brahmosNode.js
constant TAG_NODE (line 7) | const TAG_NODE = Symbol.for('tag');
constant TAG_ELEMENT_NODE (line 8) | const TAG_ELEMENT_NODE = Symbol.for('tag-element');
constant CLASS_COMPONENT_NODE (line 9) | const CLASS_COMPONENT_NODE = Symbol.for('class-component');
constant FUNCTIONAL_COMPONENT_NODE (line 10) | const FUNCTIONAL_COMPONENT_NODE = Symbol.for('functional-component');
constant ATTRIBUTE_NODE (line 11) | const ATTRIBUTE_NODE = Symbol.for('attribute');
function isTagElementNode (line 16) | function isTagElementNode({ nodeType }: NotNil): boolean {
function isHtmlTagNode (line 21) | function isHtmlTagNode({ nodeType }: NotNil): boolean {
function isTagNode (line 25) | function isTagNode(node: NotNil): boolean {
function isComponentNode (line 30) | function isComponentNode({ nodeType }: NotNil): boolean {
function isBrahmosNode (line 34) | function isBrahmosNode(node: any): boolean {
function isPrimitiveNode (line 41) | function isPrimitiveNode(node: any): boolean {
function isRenderableNode (line 48) | function isRenderableNode(node: any): boolean {
FILE: src/configs.js
constant REACT_ELEMENT (line 4) | const REACT_ELEMENT = Symbol.for('react.element');
constant REACT_FORWARD_REF (line 5) | const REACT_FORWARD_REF = Symbol.for('react.forward_ref');
constant BRAHMOS_PLACEHOLDER (line 8) | const BRAHMOS_PLACEHOLDER = '{{brahmos}}';
constant RESERVED_ATTRIBUTES (line 11) | const RESERVED_ATTRIBUTES = {
constant RENAMED_EVENTS (line 24) | const RENAMED_EVENTS = {
constant ONCHANGE_INPUT_TYPES (line 35) | const ONCHANGE_INPUT_TYPES =
constant CAMEL_ATTRIBUTES (line 38) | const CAMEL_ATTRIBUTES = /^(?:accent|alignment|arabic|baseline|cap|clip(...
constant IS_NON_DIMENSIONAL (line 44) | const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|in...
constant XLINK_NS (line 49) | const XLINK_NS = 'http://www.w3.org/1999/xlink';
constant SUSPENSE_REVEAL_INTERVAL (line 51) | const SUSPENSE_REVEAL_INTERVAL = 100;
constant EFFECT_TYPE_NONE (line 70) | const EFFECT_TYPE_NONE: 0 = 0;
constant EFFECT_TYPE_PLACEMENT (line 71) | const EFFECT_TYPE_PLACEMENT: 1 = 1;
constant EFFECT_TYPE_OTHER (line 72) | const EFFECT_TYPE_OTHER: 2 = 2;
FILE: src/createContext.js
function getConsumerCallback (line 11) | function getConsumerCallback(component: AnyComponentInstance): ConsumerC...
function createContext (line 30) | function createContext(defaultValue: any): ContextType {
FILE: src/createPortal.js
function createPortal (line 7) | function createPortal(child: ?BrahmosNode, container: HTMLElement) {
FILE: src/effectLoop.js
function updateTextNode (line 40) | function updateTextNode(fiber: Fiber): void {
function getTagChild (line 65) | function getTagChild(fiber: Fiber): Fiber {
function setLastItemInParentDOM (line 71) | function setLastItemInParentDOM(parentNode: ExtendedElement, nodeInstanc...
function setFirstNodeReference (line 80) | function setFirstNodeReference(part: Part, firstDOMNode: Node) {
function handleComponentEffect (line 205) | function handleComponentEffect(fiber) {
function handleComponentPostCommitEffect (line 244) | function handleComponentPostCommitEffect(fiber) {
function handleAttributeEffect (line 303) | function handleAttributeEffect(fiber, domNode) {
function resetEffectProperties (line 314) | function resetEffectProperties(root: HostFiber) {
function resetAlternate (line 334) | function resetAlternate(alternate) {
function removeTransitionFromRoot (line 341) | function removeTransitionFromRoot(root: HostFiber): void {
function handleFiberEffect (line 349) | function handleFiberEffect(fiber) {
method handleFiberEffect (line 445) | handleFiberEffect(fibersWithEffect[i]);
FILE: src/fiber.js
function getCurrentComponentFiber (line 36) | function getCurrentComponentFiber(): Fiber {
function setUpdateTime (line 51) | function setUpdateTime(fiber: Fiber, type: UpdateType) {
function linkFiber (line 62) | function linkFiber(fiber, refFiber, parentFiber) {
function markPendingEffect (line 73) | function markPendingEffect(fiber: Fiber, effectType: EffectType) {
function cloneChildrenFibers (line 135) | function cloneChildrenFibers(fiber: Fiber): void {
function createHostFiber (line 162) | function createHostFiber(domNode: ExtendedElement): HostFiber {
function createFiber (line 205) | function createFiber(root: HostFiber, node: BrahmosNode, part: Part): Fi...
function addAlternates (line 237) | function addAlternates(current: Fiber, wip: Fiber): void {
function shouldClone (line 286) | function shouldClone(newNode: any, oldNode: any): boolean {
function needProcessing (line 304) | function needProcessing(fiber, lastCompleteTime, updateTimeKey) {
function getFiberWhichRequiresProcessing (line 308) | function getFiberWhichRequiresProcessing(fiber, lastCompleteTime, update...
function getNextFiber (line 317) | function getNextFiber(
function getFiberFromComponent (line 348) | function getFiberFromComponent(component: AnyComponentInstance): Fiber {
function resetToCommittedChild (line 362) | function resetToCommittedChild(fiber: Fiber): void {
function markToTearDown (line 376) | function markToTearDown(fiber: Fiber): void {
FILE: src/functionalComponentInstance.js
function functionalComponentInstance (line 6) | function functionalComponentInstance(
FILE: src/helpers/shallowEqual.js
function shallowEqual (line 6) | function shallowEqual(objA: any, objB: any): boolean {
FILE: src/hooks.js
function getCurrentComponent (line 50) | function getCurrentComponent() {
function cloneHooks (line 57) | function cloneHooks(component) {
function getHooksList (line 84) | function getHooksList(updateType, component) {
function getHooksListFromFiber (line 92) | function getHooksListFromFiber(fiber) {
function getCurrentHook (line 106) | function getCurrentHook(updateType, hookIndex, component) {
function isDependenciesChanged (line 122) | function isDependenciesChanged(deps, oldDeps) {
function reRenderComponentIfRequired (line 134) | function reRenderComponentIfRequired(component, state, lastState) {
method updater (line 231) | updater() {
method effect (line 346) | effect() {
method clearTimeout (line 449) | clearTimeout() {
method updatePendingState (line 452) | updatePendingState(isPending, updateSource) {
method startTransition (line 468) | startTransition(cb: Function) {
FILE: src/memo.js
function memo (line 4) | function memo(Component, comparator) {
FILE: src/parseChildren.js
constant TAG_REGEX (line 7) | const TAG_REGEX = /<([^\s"'=<>/]+)/g;
constant ATTR_REGEX (line 9) | const ATTR_REGEX = /\s*([^\s"'=<>/]*)/g;
constant DOUBLE_QUOTE_REGEX (line 11) | const DOUBLE_QUOTE_REGEX = /[^"]*/g;
constant SINGLE_QUOTE_REGEX (line 12) | const SINGLE_QUOTE_REGEX = /[^"]*/g;
constant TAG_END_REGEX (line 14) | const TAG_END_REGEX = /<\/([^\s"'=<>]+)>/g;
constant STRING_CHILDREN_REGEX (line 16) | const STRING_CHILDREN_REGEX = /[^<]*/g;
constant COMMENT_REGEX (line 18) | const COMMENT_REGEX = /<!--.*?-->/g;
constant SELF_CLOSING_TAGS (line 20) | const SELF_CLOSING_TAGS = [
function parseStatic (line 40) | function parseStatic(strings: Array<string>) {
function apply (line 229) | function apply(tree: any, values) {
function parseChildren (line 262) | function parseChildren(node: BrahmosNode): BrahmosNode {
FILE: src/processArrayFiber.js
function processArrayFiber (line 9) | function processArrayFiber(fiber: Fiber): void {
FILE: src/processComponentFiber.js
function getErrorInfo (line 47) | function getErrorInfo(fiber: Fiber): ErrorInfo {
function getCurrentContext (line 62) | function getCurrentContext(fiber: Fiber): AllContext {
function getUpdatedState (line 85) | function getUpdatedState(prevState, updates) {
function resetLoopToComponentsFiber (line 93) | function resetLoopToComponentsFiber(fiber) {
function processComponentFiber (line 103) | function processComponentFiber(fiber: Fiber): void {
FILE: src/processTagFiber.js
function isAttrOverridden (line 11) | function isAttrOverridden(tagAttrs, attrName, attrIndex) {
function attributeNode (line 17) | function attributeNode(props, ref) {
function partsToFiber (line 25) | function partsToFiber(parts, values, parentFiber) {
function processTagFiber (line 85) | function processTagFiber(fiber: Fiber): void {
FILE: src/processTextFiber.js
function processTextFiber (line 8) | function processTextFiber(fiber: Fiber): void {
FILE: src/reRender.js
function reRender (line 21) | function reRender(component: AnyComponentInstance): void {
FILE: src/reactEvents.js
function getEffectiveEventName (line 5) | function getEffectiveEventName(eventName, node) {
function getInputStateType (line 17) | function getInputStateType(node) {
function handleControlledReset (line 27) | function handleControlledReset(node) {
function handleInputProperty (line 41) | function handleInputProperty(inputStateType, node, attrName, attrValue) {
function getPatchedEventHandler (line 70) | function getPatchedEventHandler(node, attrName, handler) {
FILE: src/refs.js
function forwardRef (line 6) | function forwardRef(Component: FunctionalComponent): FunctionalComponent {
function createRef (line 17) | function createRef(): ObjectRef {
function setRef (line 22) | function setRef(ref: Ref, instance: any): void {
FILE: src/render.js
function render (line 16) | function render(node: any, target: ExtendedElement) {
FILE: src/scheduler.js
constant RENDER_SLOT (line 7) | const RENDER_SLOT = 5;
constant MAX_RENDER_SLOT (line 8) | const MAX_RENDER_SLOT = 30;
constant FRAME_DURATION_DEFAULT (line 9) | const FRAME_DURATION_DEFAULT = 16;
constant DEFERRED_TRANSITION_MAX_RETRY (line 10) | const DEFERRED_TRANSITION_MAX_RETRY = 300;
constant OTHER_TRANSITION_MAX_RETRY (line 11) | const OTHER_TRANSITION_MAX_RETRY = 600;
function schedule (line 42) | function schedule(cb) {
function scheduleTask (line 77) | function scheduleTask(
FILE: src/tags.js
method return (line 20) | return (partMetaCode) => {
FILE: src/tearDown.js
function tearDownChild (line 18) | function tearDownChild(child, part, _isTagNode, removeDOM) {
function tearDownFiber (line 36) | function tearDownFiber(fiber, removeDOM) {
FILE: src/transitionUtils.js
constant PREDEFINED_TRANSITION_SYNC (line 20) | const PREDEFINED_TRANSITION_SYNC: PredefinedTransition = {
constant PREDEFINED_TRANSITION_DEFERRED (line 26) | const PREDEFINED_TRANSITION_DEFERRED: PredefinedTransition = {
function shouldProcessTransition (line 32) | function shouldProcessTransition(transition: AnyTransition) {
function isTransitionCompleted (line 41) | function isTransitionCompleted(transition: AnyTransition): boolean {
function isTransitionResolved (line 49) | function isTransitionResolved(transition: Transition): boolean {
function setTransitionComplete (line 56) | function setTransitionComplete(transition: AnyTransition): void {
function isCustomTransition (line 100) | function isCustomTransition(transition: Transition): boolean {
FILE: src/unmountComponentAtNode.js
function unmountComponentAtNode (line 7) | function unmountComponentAtNode(container: ExtendedElement): boolean {
FILE: src/updateAttribute.js
function applyDiffProperty (line 19) | function applyDiffProperty(newObj, oldObj, resetValue, cb) {
function setAttribute (line 37) | function setAttribute(node, attrName, attrValue, oldAttrValue, isSvgAttr...
function updateNodeAttributes (line 134) | function updateNodeAttributes(node, attributes, oldAttributes, isSvgAttr...
FILE: src/updateUtils.js
function getDeferredMeta (line 38) | function getDeferredMeta() {
function setUpdateSource (line 42) | function setUpdateSource(source: UpdateSource) {
function getCurrentUpdateSource (line 46) | function getCurrentUpdateSource() {
function getCurrentTransition (line 50) | function getCurrentTransition() {
function resetUpdateSource (line 54) | function resetUpdateSource() {
function withUpdateSource (line 68) | function withUpdateSource(source: UpdateSource, cb: Function): void {
function withTransition (line 74) | function withTransition(transition: AnyTransition, cb: Function): void {
function shouldPreventSchedule (line 82) | function shouldPreventSchedule(root: HostFiber): boolean {
function isDeferredUpdate (line 87) | function isDeferredUpdate(): boolean {
function getUpdateType (line 91) | function getUpdateType(): UpdateType {
function getPendingUpdatesKey (line 99) | function getPendingUpdatesKey(updateType: UpdateType) {
function getPendingUpdates (line 106) | function getPendingUpdates(fiber: Fiber): PendingUpdates {
function deferredUpdates (line 126) | function deferredUpdates(cb: Function): void {
function syncUpdates (line 134) | function syncUpdates(cb: Function): void {
function getComponentFiberInWorkingTree (line 138) | function getComponentFiberInWorkingTree(fiber, nodeInstance) {
FILE: src/utils.js
function isHTMLElement (line 14) | function isHTMLElement(tagName: string): boolean {
function isEventAttribute (line 19) | function isEventAttribute(attrName: string): boolean {
function getEffectiveAttrName (line 29) | function getEffectiveAttrName(attrName: string): string {
function getNodeName (line 43) | function getNodeName(node: HTMLElement): string {
function getEventName (line 47) | function getEventName(attrName: string, isCaptureEvent: boolean): string {
function isCustomElement (line 54) | function isCustomElement(tagName: string): boolean {
function isNil (line 60) | function isNil(val: any): boolean {
function now (line 71) | function now(): number {
function timestamp (line 78) | function timestamp(): number {
function addDataContainer (line 83) | function addDataContainer(domNode: Node): void {
function getNormalizedProps (line 94) | function getNormalizedProps(props: ObjectLiteral, includeRef: boolean): ...
function loopEntries (line 110) | function loopEntries(obj: ObjectLiteral, cb: (key: string, value: any) =...
method if (line 221) | if (object[method]) {
method read (line 269) | read() {
FILE: src/workLoop.js
function fiberHasUnprocessedUpdates (line 49) | function fiberHasUnprocessedUpdates(fiber) {
function processFiber (line 61) | function processFiber(fiber: Fiber) {
function shouldCommit (line 101) | function shouldCommit(root) {
function workLoop (line 161) | function workLoop(fiber: Fiber, topFiber: Fiber | HostFiber) {
function doDeferredProcessing (line 239) | function doDeferredProcessing(root: HostFiber) {
function doSyncProcessing (line 261) | function doSyncProcessing(fiber: Fiber) {
Condensed preview — 131 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (587K chars).
[
{
"path": ".editorconfig",
"chars": 240,
"preview": "# EditorConfig is awesome: http://EditorConfig.org\n\nroot = true\n\n[*]\nindent_size = 2\ncharset = utf-8\nend_of_line = lf\nin"
},
{
"path": ".eslintrc",
"chars": 304,
"preview": "{\n \"env\": {\n \"browser\": true,\n \"jest/globals\": true\n },\n \"parser\": \"babel-eslint\",\n \"extends\": [\"standard\", \"p"
},
{
"path": ".flowconfig",
"chars": 58,
"preview": "[ignore]\n\n[include]\n\n[libs]\n\n[lints]\n\n[options]\n\n[strict]\n"
},
{
"path": ".gitignore",
"chars": 107,
"preview": "node_modules\n.cache\ndist\nlib\n*.log\nreference\n.DS_Store\n\n# editor specific files\n.vscode\n.package-lock.json\n"
},
{
"path": ".npmignore",
"chars": 182,
"preview": "# Ignore source and reference files\nsrc\nnode_modules\nreference\n\n# Ignore config files\n.eslintrc\n.gitignore\nwebpack.confi"
},
{
"path": ".prettierrc",
"chars": 263,
"preview": "{\n \"printWidth\": 100,\n \"arrowParens\": \"always\",\n \"singleQuote\": true,\n \"tabWidth\": 2,\n \"useTabs\": false,\n \"semi\": "
},
{
"path": ".travis.yml",
"chars": 295,
"preview": "language: node_js\nnode_js:\n - \"8\"\nscript:\n - echo 'Starting Build!'\n - echo 'Installing Deps!'\n - yarn\n - echo 'Tes"
},
{
"path": "CHANGELOG.md",
"chars": 399,
"preview": "v11.0\n - Support new jsx transform.\n - Children APIs\n - 3rd Party React library support (Tested React-router, redux, "
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3357,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": "LICENSE",
"chars": 1072,
"preview": "MIT License\n\nCopyright (c) 2019 Sudhanshu Yadav\n\nPermission is hereby granted, free of charge, to any person obtaining a"
},
{
"path": "README.md",
"chars": 7259,
"preview": "<p align=\"center\">\n <img src=\"https://unpkg.com/brahmos@0.5.0/brahmos.svg\" alt=\"Brahmos.js\" width=\"250\">\n</p>\n\n# Brahmo"
},
{
"path": "babel.config.js",
"chars": 295,
"preview": "module.exports = {\n presets: [['@babel/preset-env']],\n plugins: [\n '@babel/plugin-transform-flow-strip-types',\n "
},
{
"path": "bundlesize.config.json",
"chars": 191,
"preview": "{\n \"files\": [\n {\n \"path\": \"./dist/brahmos.js\",\n \"maxSize\": \"20 kB\"\n },\n {\n \"path\""
},
{
"path": "docs/HOW_IT_WORKS.md",
"chars": 20510,
"preview": "<h2> ⚠️ Warning: This document is stale, a lot has been changed since this doc was published. This need's to be updated."
},
{
"path": "example/App.js",
"chars": 4935,
"preview": "import { useState, useEffect, useMemo } from 'brahmos';\n\nimport { Switch, Route, NavLink, useLocation } from 'react-rout"
},
{
"path": "example/App.scss",
"chars": 1848,
"preview": "@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');\n\n/** Colors **/\n$brahmos-color-1: #efdc4f;\n$brahm"
},
{
"path": "example/Logos.js",
"chars": 2933,
"preview": "import Brahmos from 'brahmos';\n\nexport function GithubLogo(props) {\n return (\n <svg viewBox=\"0 0 478.613 478.613\" {."
},
{
"path": "example/common/ReactCredit.js",
"chars": 291,
"preview": "export default function ReactCredit({ name, link }) {\n return (\n <p className=\"react-credit\">\n This demo is for"
},
{
"path": "example/concurrent-mode/fakeApi.js",
"chars": 3515,
"preview": "export function fetchProfileData(userId) {\n const userPromise = fetchUser(userId);\n const postsPromise = fetchPosts(us"
},
{
"path": "example/concurrent-mode/index.js",
"chars": 5376,
"preview": "/**\n * Forked from: https://codesandbox.io/s/jovial-lalande-26yep?file=/src/index.js:0-1646\n */\nimport Brahmos, { useSta"
},
{
"path": "example/context-api/index.js",
"chars": 1319,
"preview": "import Brahmos, { Component, createContext, useContext, useState } from 'brahmos';\n\nconst BrahmosContext = createContext"
},
{
"path": "example/error-boundaries/index.js",
"chars": 2714,
"preview": "import Brahmos, { Component } from 'brahmos';\nimport ReactCredit from '../common/ReactCredit';\n\n// Forked from: https://"
},
{
"path": "example/food-app/food-app.css",
"chars": 1610,
"preview": ".food-app {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 40px;\n text-align: center;\n paddin"
},
{
"path": "example/food-app/food-menu.json",
"chars": 1021,
"preview": "[\n {\n \"id\": \"SN\",\n \"label\": \"Schezwan Noodles\",\n \"diet\": \"veg\",\n \"description\": \"Spicy Noodles soaked in Sc"
},
{
"path": "example/food-app/mobx/App.js",
"chars": 1488,
"preview": "import { Fragment, useEffect, useState } from 'brahmos';\nimport { observer } from 'mobx-react-lite';\n\nimport { useRootSt"
},
{
"path": "example/food-app/mobx/Comps.js",
"chars": 3705,
"preview": "import { observer } from 'mobx-react-lite';\n\nimport { useRootStore } from './mobx';\n\nexport const MenuItem = observer(fu"
},
{
"path": "example/food-app/mobx/index.js",
"chars": 729,
"preview": "import { StrictMode } from 'brahmos';\n\nimport App from './App';\nimport { RootStore, RootStoreProvider } from './mobx';\n\n"
},
{
"path": "example/food-app/mobx/mobx.js",
"chars": 1494,
"preview": "import { createContext, useContext, useEffect } from 'brahmos';\nimport { makeAutoObservable, toJS } from 'mobx';\n\nexport"
},
{
"path": "example/food-app/react-query/App.js",
"chars": 1080,
"preview": "import { Fragment } from 'brahmos';\n\nimport { useDietStore } from './zustand';\nimport { MenuList, Message, PaymentFooter"
},
{
"path": "example/food-app/react-query/Comps.js",
"chars": 3705,
"preview": "import Brahmos from 'brahmos';\n\nimport { useCartStore } from './zustand';\nimport { useCartPrice } from './hooks';\n\nexpor"
},
{
"path": "example/food-app/react-query/hooks.js",
"chars": 1124,
"preview": "import { useMemo } from 'brahmos';\nimport { useQuery } from 'react-query';\n\nimport { useDietStore, useCartStore } from '"
},
{
"path": "example/food-app/react-query/index.js",
"chars": 909,
"preview": "import { StrictMode } from 'brahmos';\nimport { QueryCache, ReactQueryCacheProvider } from 'react-query';\n\nimport App fro"
},
{
"path": "example/food-app/react-query/zustand.js",
"chars": 838,
"preview": "import create from 'zustand';\n\nexport const useDietStore = create((set) => ({\n diet: 'all',\n changeDiet: () => set((st"
},
{
"path": "example/food-app/redux/App.js",
"chars": 2024,
"preview": "import { Fragment, useEffect, useState } from 'brahmos';\nimport { shallowEqual, useSelector, useDispatch } from 'react-r"
},
{
"path": "example/food-app/redux/Comps.js",
"chars": 4269,
"preview": "import Brahmos from 'brahmos';\n\nimport { useSelector, useDispatch } from 'react-redux';\n\nimport { ACTIONS } from './redu"
},
{
"path": "example/food-app/redux/index.js",
"chars": 665,
"preview": "import { StrictMode } from 'brahmos';\nimport { Provider } from 'react-redux';\n\nimport App from './App';\nimport { createR"
},
{
"path": "example/food-app/redux/redux.js",
"chars": 2079,
"preview": "import { createStore } from 'redux';\n\nexport const ACTIONS = {\n CHANGE_DIET: 'CHANGE_DIET',\n LOAD_MENU: 'LOAD_MENU',\n "
},
{
"path": "example/food-app/utils.js",
"chars": 102,
"preview": "import foodMenu from './food-menu.json';\n\nexport async function loadFoodData() {\n return foodMenu;\n}\n"
},
{
"path": "example/hooks/index.js",
"chars": 1575,
"preview": "import Brahmos, { useState, useEffect, useRef } from 'brahmos';\nimport ReactCredit from '../common/ReactCredit';\n\nfuncti"
},
{
"path": "example/index.html",
"chars": 194,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <title>Brahmos Demo</title>\n <meta charset=\"UTF-8\" />\n </head>\n\n <body>\n <di"
},
{
"path": "example/index.js",
"chars": 255,
"preview": "import { render } from 'brahmos';\nimport { HashRouter as Router } from 'react-router-dom';\n\nimport App from './App.js';\n"
},
{
"path": "example/lazy-component/index.js",
"chars": 442,
"preview": "import Brahmos, { Suspense, lazy } from 'brahmos';\n\nconst LazyTodoList = lazy(() => {\n return new Promise((resolve) => "
},
{
"path": "example/portals/index.js",
"chars": 1729,
"preview": "import Brahmos, { createPortal, useState } from 'brahmos';\n\nfunction Modal({ onClose }) {\n return (\n <div className="
},
{
"path": "example/sierpinski-triangle/index.js",
"chars": 5307,
"preview": "import { Component, unstable_deferredUpdates, unstable_syncUpdates } from 'brahmos';\n\n/**\n * Source: https://github.com/"
},
{
"path": "example/suspense-list/fakeApi.js",
"chars": 2198,
"preview": "export function fetchProfileData() {\n const userPromise = fetchUser();\n const postsPromise = fetchPosts();\n const tri"
},
{
"path": "example/suspense-list/index.js",
"chars": 3695,
"preview": "/**\n * Forked from: https://codesandbox.io/s/black-wind-byilt\n */\n\nimport Brahmos, { SuspenseList, Suspense, useEffect, "
},
{
"path": "example/svg-chart/index.js",
"chars": 1222,
"preview": "import Brahmos, { Component } from 'brahmos';\n\nfunction Rect({ height, index }) {\n return (\n <rect\n width=\"40\"\n"
},
{
"path": "example/third-party-component/index.js",
"chars": 1737,
"preview": "import { PureComponent } from 'brahmos';\nimport { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend } fr"
},
{
"path": "example/time-slicing/Chart.js",
"chars": 3279,
"preview": "import Brahmos, { PureComponent } from 'brahmos';\nimport {\n VictoryArea,\n VictoryAxis,\n VictoryChart,\n VictoryBar,\n "
},
{
"path": "example/time-slicing/Clock.js",
"chars": 2833,
"preview": "import Brahmos, { createRef, PureComponent } from 'brahmos';\n\nconst SPEED = 0.003 / Math.PI;\nconst FRAMES = 10;\n\nexport "
},
{
"path": "example/time-slicing/index.js",
"chars": 3674,
"preview": "import Brahmos, { PureComponent } from 'brahmos';\nimport { flushSync } from 'react-dom';\nimport Scheduler from 'schedule"
},
{
"path": "example/todo-list/index.js",
"chars": 3344,
"preview": "import Brahmos, { Component } from 'brahmos';\n\n// Source: https://stackoverflow.com/a/12646864\nfunction shuffleArray(arr"
},
{
"path": "example/use-deferred-value/MySlowList.js",
"chars": 1048,
"preview": "import Brahmos, { PureComponent } from 'brahmos';\n\n// Note: this file is exactly the same in both examples.\n\nfunction Li"
},
{
"path": "example/use-deferred-value/index.js",
"chars": 2228,
"preview": "import Brahmos, { useDeferredValue, useState, useEffect } from 'brahmos';\nimport MySlowList from './MySlowList';\nimport "
},
{
"path": "example/use-deferred-value-suspense/fakeApi.js",
"chars": 3482,
"preview": "export function fetchProfileData(userId) {\n const userPromise = fetchUser(userId);\n const postsPromise = fetchPosts(us"
},
{
"path": "example/use-deferred-value-suspense/index.js",
"chars": 2709,
"preview": "/**\n * Forked from: https://codesandbox.io/s/vigorous-keller-3ed2b\n */\n\nimport Brahmos, { useDeferredValue, useState, us"
},
{
"path": "example_old/App.js",
"chars": 2990,
"preview": "import Brahmos, { Suspense, lazy, Component } from '../src';\n\nimport TodoList from './TodoList';\nimport UseStateExample "
},
{
"path": "example_old/ErrorBoundaryExample.js",
"chars": 2458,
"preview": "import Brahmos from '../src';\n\nclass ErrorBoundary extends Brahmos.Component {\n constructor(props) {\n super(props);\n"
},
{
"path": "example_old/RefsExample.js",
"chars": 1268,
"preview": "import Brahmos, { Component, createRef, forwardRef } from '../src';\n\nclass Child extends Component {\n logSomething() {\n"
},
{
"path": "example_old/SVGExample.js",
"chars": 6254,
"preview": "import Brahmos, { Component } from '../src';\n\nfunction Path() {\n return (\n <path\n fill=\"#703E03\"\n d=\"M29.2"
},
{
"path": "example_old/TodoList.js",
"chars": 1158,
"preview": "import Brahmos, { Component } from '../src';\n\nexport default class TodoList extends Component {\n static defaultProps = "
},
{
"path": "example_old/UnMountAtNode.js",
"chars": 858,
"preview": "import Brahmos, { Component, unmountComponentAtNode } from '../src';\n\nexport default class UnMountAtNode extends Compone"
},
{
"path": "example_old/UseStateExample.js",
"chars": 588,
"preview": "import Brahmos, { useState } from '../src';\nimport friends from './friends.json';\n\nexport default function UseStateExamp"
},
{
"path": "example_old/concurrentApp.js",
"chars": 3707,
"preview": "import _Brahmos from '../src';\nimport data from './data.json';\n\n// Doing this to check performance\nconst Brahmos = _Brah"
},
{
"path": "example_old/context.js",
"chars": 1218,
"preview": "import Brahmos, { Component, createContext, useContext, useState } from '../src';\n\nconst BrahmosContext = createContext("
},
{
"path": "example_old/createPortalExample.js",
"chars": 588,
"preview": "import Brahmos, { Component, createPortal, useState } from '../src';\n\nclass Child extends Component {\n componentWillUnm"
},
{
"path": "example_old/data.json",
"chars": 180802,
"preview": "{\n \"total_count\": 3782,\n \"incomplete_results\": false,\n \"items\": [\n {\n \"id\": 42283287,\n \"node_id\": \"MDEwO"
},
{
"path": "example_old/fakeApi.js",
"chars": 2515,
"preview": "export function fetchProfileData() {\n const userPromise = fetchUser();\n const postsPromise = fetchPosts();\n const tri"
},
{
"path": "example_old/fakeApiSuspenseList.js",
"chars": 2204,
"preview": "export function fetchProfileData() {\n const userPromise = fetchUser();\n const postsPromise = fetchPosts();\n const tri"
},
{
"path": "example_old/friends.json",
"chars": 833,
"preview": "[\n {\n \"_id\": \"5d029d30bc3e8f972d3aa50f\",\n \"name\": \"Roberta Wall\"\n },\n {\n \"_id\": \"5d029d3022013fcdad4791d7\",\n"
},
{
"path": "example_old/index.html",
"chars": 496,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <title>Brahmos Demo</title>\n <meta charset=\"UTF-8\" />\n <style>\n html,\n "
},
{
"path": "example_old/index.js",
"chars": 378,
"preview": "import App from './App.js';\nimport UnMountAtNode from './UnMountAtNode';\nimport Brahmos, { render } from '../src';\nimpor"
},
{
"path": "example_old/lazySuspenseExample.js",
"chars": 767,
"preview": "import Brahmos, { Suspense, lazy } from '../src';\nimport TodoList from './TodoList';\n\nconst LazyToDo = lazy(() => {\n re"
},
{
"path": "example_old/suspenseExamples.js",
"chars": 3028,
"preview": "import Brahmos, { useState, useTransition, Suspense } from '../src';\n\nimport { fetchProfileData } from './fakeApi';\n\n// "
},
{
"path": "example_old/suspenseListExample.js",
"chars": 1398,
"preview": "import Brahmos, { SuspenseList, Suspense } from '../src';\n\nimport { fetchProfileData } from './fakeApiSuspenseList';\n\nco"
},
{
"path": "jest.config.js",
"chars": 281,
"preview": "module.exports = {\n rootDir: './src',\n transform: {\n '^.+\\\\.js$': 'babel-jest',\n },\n moduleNameMapper: {\n '^br"
},
{
"path": "package.json",
"chars": 3093,
"preview": "{\n \"name\": \"brahmos\",\n \"version\": \"0.11.1\",\n \"description\": \"Super charged UI library with modern React API and nativ"
},
{
"path": "rollup.config.js",
"chars": 1324,
"preview": "import fileSize from 'rollup-plugin-filesize';\nimport commonjs from '@rollup/plugin-commonjs';\nimport license from 'roll"
},
{
"path": "src/Children.js",
"chars": 4229,
"preview": "// @flow\nimport { BRAHMOS_DATA_KEY } from './configs';\nimport { isTagElementNode, isComponentNode, isTagNode, isHtmlTagN"
},
{
"path": "src/Component.js",
"chars": 2036,
"preview": "// @flow\nimport reRender from './reRender';\nimport { guardedSetState } from './updateUtils';\nimport { BRAHMOS_DATA_KEY }"
},
{
"path": "src/Suspense.js",
"chars": 16433,
"preview": "// @flow\nimport { createBrahmosNode, Component } from './circularDep';\n\nimport { forwardRef } from './refs';\nimport { ge"
},
{
"path": "src/TagNode.js",
"chars": 992,
"preview": "// @flow\nimport { addDataContainer } from './utils';\nimport type { BrahmosNode, TagNodeType, NodePart } from './flow.typ"
},
{
"path": "src/TemplateNode.js",
"chars": 4463,
"preview": "// @flow\nimport { BRAHMOS_PLACEHOLDER } from './configs';\nimport { toArray, createEmptyTextNode, addDataContainer, remov"
},
{
"path": "src/TemplateTag.js",
"chars": 3060,
"preview": "// @flow\nimport type { PartMeta, TemplateTagType } from './flow.types';\n\n/**\n * Parts meta code looks like this.\n * type"
},
{
"path": "src/__tests__/BrahmosES6class.test.js",
"chars": 7935,
"preview": "/*\nForked from -\nhttps://github.com/facebook/react/blob/master/packages/react/src/__tests__/ReactES6Class-test.js\n\nTODO:"
},
{
"path": "src/__tests__/BrahmosPureComponent.test.js",
"chars": 2146,
"preview": "/*\nForked from -\nhttps://github.com/facebook/react/blob/master/packages/react/src/__tests__/ReactPureComponent-test.js\n*"
},
{
"path": "src/__tests__/__snapshots__/listRendering.test.js.snap",
"chars": 2032,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Test list rendering Test Stateful Components in Array should handle"
},
{
"path": "src/__tests__/attributes.test.js",
"chars": 524,
"preview": "import { fireEvent } from '@testing-library/dom';\n\nimport { createContext, useState } from '../';\nimport { useContext } "
},
{
"path": "src/__tests__/children_apis.test.js",
"chars": 2826,
"preview": "import { cloneElement, Children } from '../';\nimport { render } from './testUtils';\n\ndescribe('Test cloneElement', () =>"
},
{
"path": "src/__tests__/context.test.js",
"chars": 1564,
"preview": "import { fireEvent } from '@testing-library/dom';\n\nimport { createContext, useState } from '..';\nimport { useContext } f"
},
{
"path": "src/__tests__/jest.setup.js",
"chars": 573,
"preview": "/**\n * RequestIdleCallback sim\n * Source: https://developers.google.com/web/updates/2015/08/using-requestidlecallback\n *"
},
{
"path": "src/__tests__/listRendering.test.js",
"chars": 7131,
"preview": "import { fireEvent } from '@testing-library/dom';\nimport { html } from 'js-beautify';\n\nimport { useState } from '../brah"
},
{
"path": "src/__tests__/memo.test.js",
"chars": 1653,
"preview": "import { fireEvent } from '@testing-library/dom';\n\nimport { memo, useState } from '../';\n\nimport { render, sleep } from "
},
{
"path": "src/__tests__/setState.test.js",
"chars": 3300,
"preview": "import { fireEvent } from '@testing-library/dom';\nimport { html } from 'js-beautify';\n\nimport { Component } from '../';\n"
},
{
"path": "src/__tests__/testUtils.js",
"chars": 1166,
"preview": "import * as testLib from '@testing-library/dom';\nimport { render, unmountComponentAtNode } from '..';\n\nconst queryMethod"
},
{
"path": "src/__tests__/utils.test.js",
"chars": 2040,
"preview": "import {\n isHTMLElement,\n isEventAttribute,\n getNodeName,\n getEventName,\n isCustomElement,\n} from '../utils';\n\ndesc"
},
{
"path": "src/brahmos.js",
"chars": 2130,
"preview": "/** Component classes, Suspense and lazy */\nimport {\n Component,\n PureComponent,\n createElement,\n createBrahmosNode"
},
{
"path": "src/brahmosNode.js",
"chars": 2335,
"preview": "// @flow\nimport { isNil } from './utils';\n\nimport type { BrahmosNode, ObjectLiteral } from './flow.types';\nimport { REAC"
},
{
"path": "src/circularDep.js",
"chars": 251,
"preview": "/**\n * The following components cause circular dependency\n * issue in webpack, so to mitigate that the order of\n * impor"
},
{
"path": "src/configs.js",
"chars": 3032,
"preview": "// @flow\n// React element types\n// We have to add same type of to support third party plugins\nexport const REACT_ELEMENT"
},
{
"path": "src/createContext.js",
"chars": 2215,
"preview": "// @flow\nimport { Component } from './circularDep';\nimport { BRAHMOS_DATA_KEY } from './configs';\nimport { setUpdateTime"
},
{
"path": "src/createElement.js",
"chars": 2268,
"preview": "// @flow\nimport { getNormalizedProps, toArray } from './utils';\nimport {\n brahmosNode,\n TAG_ELEMENT_NODE,\n CLASS_COMP"
},
{
"path": "src/createPortal.js",
"chars": 428,
"preview": "// @flow\nimport type { BrahmosNode } from './flow.types';\n/**\n * Render children outside the main DOM hierarchy of\n * "
},
{
"path": "src/effectLoop.js",
"chars": 15070,
"preview": "// @flow\nimport {\n isTagElementNode,\n isTagNode,\n isComponentNode,\n isPrimitiveNode,\n ATTRIBUTE_NODE,\n CLASS_COMPO"
},
{
"path": "src/fiber.js",
"chars": 10767,
"preview": "// @flow\n\nimport {\n isComponentNode,\n isPrimitiveNode,\n ATTRIBUTE_NODE,\n isTagElementNode,\n isHtmlTagNode,\n} from '"
},
{
"path": "src/flow.types.js",
"chars": 8992,
"preview": "// @flow\nimport typeof {\n LAST_ARRAY_DOM_KEY,\n ROOT_FIBER_KEY,\n BRAHMOS_DATA_KEY,\n UPDATE_TYPE_SYNC,\n UPDATE_TYPE_D"
},
{
"path": "src/functionalComponentInstance.js",
"chars": 858,
"preview": "// @flow\nimport { prepareHooksForRender } from './hooks';\nimport { BRAHMOS_DATA_KEY } from './configs';\nimport type { Fu"
},
{
"path": "src/helpers/shallowEqual.js",
"chars": 725,
"preview": "// @flow\n/**\n * Source : https://github.com/facebook/react/blob/master/packages/shared/shallowEqual.js\n */\n\nfunction sh"
},
{
"path": "src/hooks.js",
"chars": 15451,
"preview": "// @flow\n\nimport reRender from './reRender';\nimport { getConsumerCallback } from './createContext';\nimport { getUniqueId"
},
{
"path": "src/index.js",
"chars": 90,
"preview": "import * as Brahmos from './brahmos';\n\nexport * from './brahmos';\nexport default Brahmos;\n"
},
{
"path": "src/memo.js",
"chars": 399,
"preview": "import { PureComponent } from './Component';\nimport { createBrahmosNode } from './circularDep';\n\nexport default function"
},
{
"path": "src/parseChildren.js",
"chars": 8069,
"preview": "// @flow\n\nimport { TAG_ELEMENT_NODE } from './brahmosNode';\nimport { REACT_ELEMENT } from './configs';\nimport type { Bra"
},
{
"path": "src/processArrayFiber.js",
"chars": 3170,
"preview": "// @flow\nimport { getNextChildFiber, createAndLink, markToTearDown, markPendingEffect } from './fiber';\nimport { getKey "
},
{
"path": "src/processComponentFiber.js",
"chars": 12330,
"preview": "// @flow\nimport {\n cloneChildrenFibers,\n createAndLink,\n resetToCommittedChild,\n markPendingEffect,\n setCurrentComp"
},
{
"path": "src/processTagFiber.js",
"chars": 4532,
"preview": "// @flow\nimport { TAG_ELEMENT_NODE, ATTRIBUTE_NODE } from './brahmosNode';\nimport { createAndLink, cloneChildrenFibers, "
},
{
"path": "src/processTextFiber.js",
"chars": 485,
"preview": "// @flow\n\nimport { markPendingEffect } from './fiber';\nimport { EFFECT_TYPE_OTHER } from './configs';\n\nimport type { Fib"
},
{
"path": "src/reRender.js",
"chars": 3499,
"preview": "// @flow\nimport {\n UPDATE_SOURCE_IMMEDIATE_ACTION,\n UPDATE_SOURCE_TRANSITION,\n UPDATE_TYPE_SYNC,\n} from './configs';\n"
},
{
"path": "src/reactEvents.js",
"chars": 3016,
"preview": "import { getNodeName } from './utils';\nimport { syncUpdates } from './updateUtils';\nimport { RENAMED_EVENTS, ONCHANGE_IN"
},
{
"path": "src/refs.js",
"chars": 981,
"preview": "// @flow\nimport { getNormalizedProps } from './utils';\nimport type { ObjectLiteral, Ref, ObjectRef, FunctionalComponent "
},
{
"path": "src/render.js",
"chars": 2057,
"preview": "// @flow\nimport { createBrahmosNode } from './circularDep';\nimport { CLASS_COMPONENT_NODE } from './brahmosNode';\nimport"
},
{
"path": "src/scheduler.js",
"chars": 4451,
"preview": "// @flow\nimport { PREDEFINED_TRANSITION_DEFERRED } from './transitionUtils';\n\nimport type { HostFiber } from './flow.typ"
},
{
"path": "src/tags.js",
"chars": 835,
"preview": "// @flow\nimport TemplateTag from './TemplateTag';\nimport { brahmosNode, TAG_NODE } from './brahmosNode';\nimport type { T"
},
{
"path": "src/tearDown.js",
"chars": 3648,
"preview": "// @flow\nimport { callLifeCycle, remove, getNextSibling, isMounted } from './utils';\n\nimport {\n isComponentNode,\n isRe"
},
{
"path": "src/transitionUtils.js",
"chars": 3075,
"preview": "// @flow\nimport { getUniqueId } from './utils';\nimport {\n UPDATE_SOURCE_TRANSITION,\n TRANSITION_STATE_START,\n TRANSIT"
},
{
"path": "src/unmountComponentAtNode.js",
"chars": 710,
"preview": "// @flow\nimport tearDown from './tearDown';\nimport { markToTearDown } from './fiber';\n\nimport type { ExtendedElement } f"
},
{
"path": "src/updateAttribute.js",
"chars": 5066,
"preview": "import { getEffectiveAttrName, getEventName, isEventAttribute, loopEntries } from './utils';\n\nimport {\n getEffectiveEve"
},
{
"path": "src/updateUtils.js",
"chars": 5457,
"preview": "// @flow\nimport { afterCurrentStack } from './utils';\nimport {\n PREDEFINED_TRANSITION_SYNC,\n PREDEFINED_TRANSITION_DEF"
},
{
"path": "src/utils.js",
"chars": 8462,
"preview": "// @flow\nimport { BRAHMOS_DATA_KEY, CAMEL_ATTRIBUTES, MODIFIED_ATTRIBUTES } from './configs';\nimport type {\n ObjectLite"
},
{
"path": "src/workLoop.js",
"chars": 8329,
"preview": "// @flow\nimport {\n isComponentNode,\n isPrimitiveNode,\n isRenderableNode,\n isTagNode,\n ATTRIBUTE_NODE,\n} from './bra"
},
{
"path": "tsconfig.json",
"chars": 168,
"preview": "{\n \"compilerOptions\": {\n \"outDir\": \"./lib\",\n \"allowJs\": true,\n \"checkJs\": true,\n \"target\": \"es5\",\n \"jsx\""
},
{
"path": "webpack.config.js",
"chars": 1050,
"preview": "var HtmlWebpackPlugin = require('html-webpack-plugin');\nvar path = require('path');\n\nmodule.exports = {\n entry: './exam"
}
]
About this extraction
This page contains the full source code of the brahmosjs/brahmos GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 131 files (539.0 KB), approximately 146.8k tokens, and a symbol index with 508 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.