https://github.com/react-declarative/offline-dev-kit
Offline dev kit based on import maps and htm jsx factory. No node_modules need anymore! Full material-ui lib without bundlers!
https://github.com/react-declarative/offline-dev-kit
css-in-js importmaps javascript material-ui react vanilla-javascript
Last synced: about 2 months ago
JSON representation
Offline dev kit based on import maps and htm jsx factory. No node_modules need anymore! Full material-ui lib without bundlers!
- Host: GitHub
- URL: https://github.com/react-declarative/offline-dev-kit
- Owner: react-declarative
- Created: 2022-03-07T14:09:57.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-24T18:20:24.000Z (over 2 years ago)
- Last Synced: 2024-05-04T00:17:51.739Z (about 1 year ago)
- Topics: css-in-js, importmaps, javascript, material-ui, react, vanilla-javascript
- Language: JavaScript
- Homepage: https://react-declarative.github.io
- Size: 1.22 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# offline-dev-kit
> Offline dev kit based on [import maps](https://github.com/WICG/import-maps) and [htm jsx factory](https://github.com/developit/htm). No node_modules need anymore! Full [material-ui](https://github.com/mui/material-ui) lib without bundlers!
## Contribute
> [!IMPORTANT]
> Made by using [react-declarative](https://github.com/react-declarative/react-declarative) to solve your problems. **⭐Star** and **💻Fork** It on github will be appreciated
## Usage
Run in command line
```
npm install
npm run build
npm start
```
## Code sample
Import map
```html
{
"imports": {
"react": "/dist/react.esm.js",
...
}
}
```
ES6 modules in modern browser
```html
import React from 'react';
import ReactDOM from 'react-dom';
import { Scaffold, Switch } from 'react-declarative';
import { createMemoryHistory } from 'history';
import options from '../config/navbar.js';
import routes from '../config/routes.js';
const history = createMemoryHistory();
const App = () => {
const handleNavClick = (name) => {
if (name === 'home-page') {
history.push('/');
} else if (name === 'profiles-page') {
history.push('/profiles');
}
};
return htm`
<${Scaffold}
title="InfoLink CRM"
onOptionClick=${handleNavClick}
options=${options}
>
<${Switch}
Loading=${() => htm`<p>Checking permissions (mock)</p>`}
NotFound=${() => htm`<p>Not found(</p>`}
history=${history}
items=${routes}
/>
<//>
`;
};
ReactDOM.render(htm`<App />`, document.getElementById('root'));
```
Check the full source code in [example](./example/) folder