open-index/open-npm huggingface dataset:
npm package: @irrelon/appworks-server
Description: AppWorks Component Server
Author: Irrelon Software Limited
Latest version: 0.0.16

# Irrelon AppWorks Component Server
This project's goal is to allow disparate UI components and layouts of components
to be server and client-rendered into host pages. The SDK provides a common shared
and namespaced state so that components can react to state changes between components,
and an event listener to listen for events from other components.

## Quick Start

```shell
npm install
npm run dev
```

## Render a Component
```
http://localhost:3011/api/v1/components/Tabs/1.0.0/bundle?createTargetElement=true&clean=false
```

## Render a Layout of Components
```
http://localhost:3011/api/v1/layouts/Example1/1.0.0/bundle?createTargetElement=true&clean=false
```

## How it Works
#### HTML Generation
The system uses ReactDOM to render components to HTML.

#### JS / Hydration Code Generation
Webpack is used inside the `utils/generateBootstrapFile.ts` to generate the hydration
code for all components / layouts.

#### CSS
Each component can describe a bundle of assets it requires.
CSS is bundled with the HTML as required.

## Modifying the API
API is using Express.

There are two key files:
1. `server/routes.ts` - This references the implementation of all the routes. Routes are express route functions.
2. `server/common/api.yaml` - This file contains the [OpenAPI spec](https://swagger.io/specification/). Routes go through the spec in order to function so if you make a change to a route, you must update the spec otherwise it will fail to function correctly.

# Next Steps

* Add support for loading data via getStaticProps (now called "props") when exported from a component file.
* Add support for page routes using the new app/routes.ts file
* Support running the server with a routes config so custom applications can use the server properly
* Define a logic process of functions so we can rationalise the rendering a bit
  * Request for component / layout
    * Check component exists
    * Get component
      * Figure out which query params belong to the component and pass them in as props
      * Check if getServerSideProps exists
        * Call getServerSideProps with the request object (with the query params easily accessible)
              and expect it to return data async
        * Spread the props returned with the layout's props?
    * Render the component based on the layout and the props we calculated

# Notes

#### Scaffold Generator
I used a generator app to scaffold the project: https://github.com/cdimascio/generator-express-no-stress-typescript