https://github.com/frlow/brine
https://github.com/frlow/brine
build-tools component-library custom-elements javascript react svelte typescript vue3 web-components
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/frlow/brine
- Owner: frlow
- Created: 2022-07-11T16:51:23.000Z (almost 4 years ago)
- Default Branch: next
- Last Pushed: 2023-05-31T19:17:18.000Z (about 3 years ago)
- Last Synced: 2025-04-21T20:06:47.879Z (about 1 year ago)
- Topics: build-tools, component-library, custom-elements, javascript, react, svelte, typescript, vue3, web-components
- Language: TypeScript
- Homepage:
- Size: 2.06 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# brine
Brine is a set of tools for creating web components by wrapping applications written in popular frameworks.
It enables developers to write components in their favourite framework and use them in any other project, regardless of
what framework is used there.
More on the power of web components [here](https://www.webcomponents.org/introduction)
Currently, brine supports the following frameworks
- 
React
- 
Vue
- 
Svelte
- 
Solid
## Install
```
npm install --save brinejs
```
## Usage
brine consists of 2 separate layers and a meta object
- the wrapper, this is th web component that wraps around the framework code
- the options object, the internals that contain the framework specific code
- the meta object, contains metadata required to create thw component
### Examples
***react***
```typescript
import { define } from 'brinejs/react'
import App from './App'
define(App, {
emits: ["change"],
attributes: ["text", "header"],
style: `.dummy-style{}`,
tag: 'my-react-app',
})
```
***vue***
```typescript
import {createOptions} from 'brinejs/vue'
import App from './App.vue'
```
***svelte***
```typescript
import {createOptions} from 'brinejs/svelte'
import App from './App.svelte'
```
***solid js***
```typescript
import {createOptions} from 'brinejs/solid'
import App from './App'
```
## Build tools
Brine contains some helper functions that makes building and bundling
simpler.
***hot component transplant***
Hot component transplant server is a websocket server that allows developers
to automatically transplant components during development or debugging.
```typescript
// build script
import {startHotComponentTransplantServer} from 'brinejs/build'
const hotTransplant = startHotComponentTransplantServer()
const build = () => {
// ... some build code
hotTransplant(['path/to/some/file/that/changed.js'])
}
```
```typescript
// in browser
new WebSocket('ws://localhost:8080').onmessage =
async (ev) => {import(ev.data+'?t='+Date.now())}
```
***boilerplate generation***
Brine has two code generation methods, 'writeMetaFile' and 'writeIndexFile'.
They can be used to generate boilerplate code, specifically the meta
object that describes the component.
#### meta file
```typescript
// Generate meta file
import {writeMetaFile} from '/brine'
await writeMetaFile('App.tsx', 'my') // (filePath, prefix or filename)
```
```typescript
// output
// App.meta.ts
export const meta = {
emits: ["my-click"],
attributes: ["count", "text", "obj"],
style: `.dummy-style{}`,
tag: 'my-app',
}
```
#### index file
```typescript
// Generate meta file
import {writeIndexFile} from '/brine'
await writeIndexFile('App.tsx', 'my') // (filePath, prefix or filename)
```
```typescript
// output
// index.ts
import { define } from 'brinejs/react'
import App from './SolidApp.js'
define(App, {
emits: [] as string[],
attributes: ["count"] as string[],
style: `.dummy-style{}` as string,
tag: 'my-solid-app' as string,
})
```
***css injection***
Most builders produce separate js and css files as build output.
Since the styling needs to be in the code, this styling must be injected into
the code somehow.
Brine has a helper method that can modify a bundled js file and inject css
into it. It also updates and adjusts the source map to match the
new content.
```typescript
import {writeJsMapCssGroup, groupJsMapCssFiles} from '/brine'
const groupedFiles = groupJsMapCssFiles(['./dist/App.js'])
await writeJsMapCssGroup(groupedFiles)
```
***type documentation***
Type documentation can be extracted and generated for the components
```typescript
import {
generateTypes,
writeTypesFile,
writeVsCodeTypes,
writeWebTypes
} from 'brine'
const types = await generateTypes(['src/App.tsx'], 'my')
// json file with serialized typing
await writeTypesFile(types, 'dist')
// vscode.html-custom-data.json (VsCode)
await writeVsCodeTypes(types, 'dist')
// web-types.json (JetBrains, IntelliJ/WebStorm)
await writeWebTypes(types, 'dist', {
name: 'example',
version: '1.0.0',
})
// react wrappers
await writeReactWrappersFile(types, 'dist/wrapper')
```