Rew X Rayous
Integration of Rayous with Rew.
About Rayous
Rayous is a simple typescript framework that renders .ts
and .tsx
files into html using js
. It uses components to render pages and uses classes to make and control the elements.
import { Component, Widget, Text } from "rayous";
export default class extends Component {
build(){
return new Widget({
children: [
new Text('Hello, World!')
]
});
}
}
More about Rayous
Installation
# pimmy
pimmy -Sa rew.rayous
# rew
rew install github:kevinJ045/rew.rayous
# rewpkgs
rew install @rewpkgs/rew.rayous
Node Dependencies
You will need to install rayous
to your app with npm
before you procees, since it will be using your node_modules
folder to bundle the client side scripts.
npm i rayous
Usage
First, you will need to create a server with serve
. rew.rayous will give you a Serve.FileRouter
. Because of the FileRouter
it gives you, it also has all the features that the FileRouter
has.
import createRouter from "rew.rayous"
import Svr from "serve"
server = Svr::create fetch: createRouter realpath './app'
server
.port 3456
.listen
.log 'Listening $port'
Creating the app
Once you created the folder you want to use, in this example it's the ./app
folder, you can start by creating a page.coffee
. In it, you can start using Rayous.
import { Component, Widget, Text } from "rayous";
export default class extends Component
build: (props) ->
new Widget children: [
new Text 'Hello, rayous X rew!'
]
Features
As you would have guessed, not all Rayous features are supported inside of rew.rayous
, since most features of Rayous are specific to it's server and can't be used in other environments. But the below are supported features:
- Layout Files
- Component Rendering
- All Widgets
Features Replaced by Rew
Some features are replaced by rew's serve
module. like:
- Build Props replaced by
Serve.props
Example App
In the repo there is a file named test.coffee
and test-app
folder, you can explore those to see more about how rew.rayous
works.