├── .babelrc ├── .gitignore ├── .glitch-assets ├── LICENSE.md ├── README.md ├── app ├── app.jsx ├── components │ ├── Box.jsx │ ├── Clock.jsx │ ├── HelloWorld.jsx │ └── UnorderedList.jsx └── index.html ├── jreact ├── __internals.js ├── hooks.js └── index.js ├── package-lock.json ├── package.json ├── server.js ├── shrinkwrap.yaml ├── watch.json └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | ["@babel/preset-react",{ 5 | "pragma": "Jreact", 6 | "throwIfNamespace": false 7 | } 8 | ] 9 | ] 10 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | bundle 2 | public 3 | build -------------------------------------------------------------------------------- /.glitch-assets: -------------------------------------------------------------------------------- 1 | {"name":"drag-in-files.svg","date":"2016-10-22T16:17:49.954Z","url":"https://cdn.hyperdev.com/drag-in-files.svg","type":"image/svg","size":7646,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/drag-in-files.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(102, 153, 205)","uuid":"adSBq97hhhpFNUna"} 2 | {"name":"click-me.svg","date":"2016-10-23T16:17:49.954Z","url":"https://cdn.hyperdev.com/click-me.svg","type":"image/svg","size":7116,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/click-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(243, 185, 186)","uuid":"adSBq97hhhpFNUnb"} 3 | {"name":"paste-me.svg","date":"2016-10-24T16:17:49.954Z","url":"https://cdn.hyperdev.com/paste-me.svg","type":"image/svg","size":7242,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/paste-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(42, 179, 185)","uuid":"adSBq97hhhpFNUnc"} 4 | {"name":"starter-react.png","date":"2017-12-13T14:21:20.291Z","url":"https://cdn.glitch.com/71d3e262-edb4-456f-8703-48a1247b894f%2Fstarter-react.png","type":"image/png","size":108071,"imageWidth":387,"imageHeight":169,"thumbnail":"https://cdn.glitch.com/71d3e262-edb4-456f-8703-48a1247b894f%2Fthumbnails%2Fstarter-react.png","thumbnailWidth":330,"thumbnailHeight":145,"dominantColor":"rgb(52,52,60)","uuid":"iilXVUDtxDgRIifb"} 5 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Lau Skeeter 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | JReact 2 | =========================== 3 | 4 | JReact is a modern declarative UI framework inspired by React that uses the full power of jQuery under the hood. 5 | 6 | ```jsx 7 | import Jreact, {render} from 'jreact'; 8 | 9 | import App from './components/App'; 10 | 11 | render(() => , document.getElementById('app')); 12 | ``` 13 | 14 | ## Usage 15 | Set your jsx pragma to Jreact in `babelrc` 16 | 17 | ```js 18 | { 19 | "presets": [ 20 | "@babel/preset-env", 21 | ["@babel/preset-react",{ 22 | "pragma": "Jreact", 23 | "throwIfNamespace": false 24 | } 25 | ] 26 | ] 27 | } 28 | ``` 29 | 30 | Then do not use fragments and make sure to escape your html. 31 | 32 | You can also use `useState` and `useEffect` hooks. 33 | 34 | ```jsx 35 | import Jreact, {useState, useEffect} from 'jreact'; 36 | 37 | const Clock = ({children}) => { 38 | const [time, setTime] = useState(Date.now()) 39 | useEffect(()=>{ 40 | setInterval(()=>{ 41 | setTime(Date.now()) 42 | },1000) 43 | },[]) 44 | return ( 45 |
46 | {new Date(time).getHours()}: 47 | {new Date(time).getMinutes()}: 48 | {new Date(time).getSeconds()} 49 |
50 | ) 51 | } 52 | ``` 53 | -------------------------------------------------------------------------------- /app/app.jsx: -------------------------------------------------------------------------------- 1 | import Jreact, {render} from '../jreact/index'; 2 | 3 | import HelloWorld from './components/HelloWorld'; 4 | 5 | render(() => , document.getElementById('main')); 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/components/Box.jsx: -------------------------------------------------------------------------------- 1 | import Jreact from '../../jreact/index'; 2 | 3 | const Box = ({children}) => { 4 | return ( 5 |
6 | {children} 7 |
8 | ) 9 | } 10 | 11 | export default Box; -------------------------------------------------------------------------------- /app/components/Clock.jsx: -------------------------------------------------------------------------------- 1 | import Jreact, {useState, useEffect} from '../../jreact/index'; 2 | import Box from './Box' 3 | 4 | const Clock = ({children}) => { 5 | const [time, setTime] = useState(Date.now()) 6 | useEffect(()=>{ 7 | setInterval(()=>{ 8 | setTime(Date.now()) 9 | },1000) 10 | },[]) 11 | return ( 12 | 13 | {new Date(time).getHours()}: 14 | {new Date(time).getMinutes()}: 15 | {new Date(time).getSeconds()} 16 | 17 | ) 18 | } 19 | 20 | export default Clock; -------------------------------------------------------------------------------- /app/components/HelloWorld.jsx: -------------------------------------------------------------------------------- 1 | import Jreact, {useState} from '../../jreact/index'; 2 | import UnorderedList from './UnorderedList'; 3 | import Clock from './Clock'; 4 | import Box from './Box'; 5 | 6 | const dependenciesArray = [ 7 | 'express - middleware for the node server', 8 | 'react - for generating the views of the app', 9 | 'react-dom - powers the rendering of elements to the DOM, typically paired with React', 10 | 'webpack - for bundling all the javascript', 11 | 'jsx-loader - allows webpack to load jsx files' 12 | ]; 13 | 14 | const componentsMade = [ 15 | 'HelloWorld - which is the view you are seeing now!', 16 | 'UnorderedList - which takes an array of "items" and returns a ~ul~ element with ~li~, elements of each of those items within it', 17 | ]; 18 | 19 | /* the main page for the index route of this app */ 20 | const HelloWorld = function() { 21 | const [counter, setCounter] = useState(0); 22 | const [otherCounter, setOtherCounter] = useState(0); 23 | 24 | return ( 25 | 26 |

Hello World!

27 |

This is a starter Glitch app for JReact! It's based on the normal react starter but it uses JQuery!

28 | 29 |

Here's some example interactive components

30 | 31 | 32 | {counter} 33 | 36 | 39 | 40 | 41 | {otherCounter} 42 | 45 | 48 | 49 |
50 |

All the magic is contained in the jreact folder and there's a small oneliner in .babelrc to replace the jsx pragma

51 |
52 | ); 53 | } 54 | 55 | export default HelloWorld -------------------------------------------------------------------------------- /app/components/UnorderedList.jsx: -------------------------------------------------------------------------------- 1 | import Jreact from '../../jreact/index'; 2 | 3 | /* takes an array prop 'items' and returns a