https://github.com/cevio/coka

A javascript framework for building user interfaces with react 18
https://github.com/cevio/coka

react react18 ssr

Last synced: 4 days ago
JSON representation

A javascript framework for building user interfaces with react 18

• Host: GitHub
• URL: https://github.com/cevio/coka
• Owner: cevio
• Created: 2022-04-13T12:44:36.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-08-06T07:31:35.000Z (over 2 years ago)
• Last Synced: 2023-03-27T18:02:56.577Z (over 1 year ago)
• Topics: react, react18, ssr
• Language: TypeScript
• Homepage:
• Size: 180 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @coka/coka

A javascript framework for building user interfaces with react 18

## Usage

```bash

$ npm i @coka/coka

```

## Example

```ts

import React from 'react';

import { createRoot } from 'react-dom/client';

import { inject, injectable } from 'inversify';

import { createServer, Component, widget, Widget, container, middleware, redirect, TRequest, memo, CokaHashChangeMode } from '@coka/coka';

const { Browser, createPathRule, use } = createServer(CokaHashChangeMode);

container.bind('xxx').toConstantValue(3);

function ggg(props: React.PropsWithChildren<{ x: number }>) {

  return 


    
x: {props.x}

    {props.children}

  

}


@injectable()

class def {

}

@widget

@injectable()

@middleware(ggg, { x: 3 })

@middleware(ggg, { x: 4 })

class abc extends Component implements Widget<{ abc: number }> {

  @inject(def) private readonly def: def;

  @inject('xxx') private readonly xxx: number;

  public initialize(props: TRequest) {

    return {

      abc: Number(props.query.a || '0') + 100,

    }

  }

  @memo

  public render(props: { abc: number }) {

    return 
 this.redirect('/222', { t: Date.now() })}>

      {props.abc}

      
















      
















      
















      
















      
















      
















      
















      
test id container

      
















      
















      
















      
















      
















      
















      
















    

  }

}


use(ggg, { x: 1 })

use(ggg, { x: 2 })

createPathRule('/', abc);

createPathRule('/222', () => 
 redirect('/?t=' + Date.now())}>

  aaa

);


const app = createRoot(document.getElementById('root'));

app.render(

  
not found

);

```