Dusk

Lightweight front-end framework based on redux, redux-thunk and react-router and history.

Installation

$ npm i @xams-framework/dusk

Usage

• Basic (see examples/dusk-example-count)

  index.tsx

  import Dusk from '@xams-framework/dusk';
  
  const app = new Dusk({
      container: '#root',
      history: {
          mode: 'browser',    // 'browser' | 'hash'
      },
      models: [
          {
              namespace: 'app1',
              state: {},
          }
      ],                      // optional config
      render({ route }) {
          return (
              <div>
                  hello world!
              </div>
          );
      },
  });
  
  app.define({
      namespace: 'app2',
      state: {},
  })
  
  app.startup();
  
  console.log(app.state);
  
  

• Routes (see examples/dusk-example-routes)

  index.tsx

  <!--... ignored code -->
  
  import Dusk, { RouterView, RouteConfig } from '@xams-framework/dusk';
  
  const app = new Dusk({
      container: '#root',
      history: {
          mode: 'browser',    // 'browser' | 'hash'
      },
      routes(render): RouteConfig[] {
          return [
              {
                  path: ['/demo'],
                  exact: true,
                  component: Demo,
              },
              {
                  path: ['/'],
                  render: render,
                  routes: [
                      {
                          path: ['/about'],
                          component: App1,
                          routes: [
                              {
                                  path: ['/about/:id'],
                                  component: App1Detail,
                              },
                          ],
                      },
                      {
                          path: ['/dashboard'],
                          component: App2,
                      },
                  ],
              },
          ];
      },
      render({ route }) {
          return (
              <div>
                  <RouterView routes={route.routes}/>
              </div>
          );
      },
  });
  app.startup();
  
  <!--... ignored code -->
  

• Plugin (see examples/dusk-example-plugins)

  app-validator.ts

  import Dusk, { PluginContext } from '@xams-framework/dusk';
  
  function isLoggedIn() {
      return !!localStorage.getItem('access_token');
  }
  
  export default function createValidator(options?: any) {
      return (app: Dusk) => {
          const history = app._history;
          return {
              name: 'app-login-validator',
              onLaunch(ctx, next) {
                  if (!isLoggedIn()) {
                      history.push('/user/login');
                  }
                  if (history.location.pathname === '/') {
                      history.push('/okr/home/basic?code=xams');
                  }
                  next();
              },
          };
      };
  };
  

  index.tsx

  <!--... ignored code -->
  import createValidator from './configuration/plugins/app-validator';
  app.use(createValidator());
  app.startup();
  
  <!--... ignored code -->

• Styles (see examples/dusk-example-styles)

Examples

• examples/dusk-example-count

• examples/dusk-example-routes

• examples/dusk-example-styles

• examples/dusk-example-plugins

• dusk-example-okr

  https://xams-creator.github.io/dusk-example-okr/

  username: dusk
  
  password: dusk