11<div align =" center " >
2- <img width="300" height="300" src="/img/logo.svg" alt="cherry-cola ">
2+ <img width="300" height="300" src="/img/logo.svg" alt="cherry-soda ">
33</div >
44<div align =" center " >
55 <a href="#get-started">Get started</a>
1313
1414Yet another JavaScript framework that nobody needs. It has an SSR-first approach, and uses stateful, functional JSX
1515components to build apps. The components are rendered on the server, but contain state change handlers that are executed
16- in the browser. Instead of bundling the full component, cherry-cola extracts and bundles only the necessary code (the
16+ in the browser. Instead of bundling the full component, cherry-soda extracts and bundles only the necessary code (the
1717event handler with its lexical scope, a template for client-side rendering, and styles) which can drastically reduce
1818bundle size. Therefore, by default (i.e. without using state change handlers), there is no client side JavaScript
1919whatsoever.
20- Currently, cherry-cola only runs on bun, Node compatibility is planned.
20+ Currently, cherry-soda only runs on bun, Node compatibility is planned.
2121
2222> ** Warning**   ;  ;
23- > Cherry-cola is experimental. Everything is subject to change.
23+ > Cherry-soda is experimental. Everything is subject to change.
2424
2525## Test the waters, dip a toe
2626
27- If you just to test out cherry-cola , you can run the examples. For that you need to have [ Bun] ( https://bun.sh )
28- installed. Then, clone the repository, install the dependencies with ` bun i ` . Use cherry-cola 's CLI to run an example:
27+ If you just to test out cherry-soda , you can run the examples. For that you need to have [ Bun] ( https://bun.sh )
28+ installed. Then, clone the repository, install the dependencies with ` bun i ` . Use cherry-soda 's CLI to run an example:
2929
3030``` shell
31- cli/index dev example/cherry-cola -template/index.jsx
31+ cli/index dev example/cherry-soda -template/index.jsx
3232```
3333
34- [ //] : # (Visit ` localhost:3000 ` and / or edit files in ` example/cherry-cola -template/ ` . To test out the other examples, use the
34+ [ //] : # (Visit ` localhost:3000 ` and / or edit files in ` example/cherry-soda -template/ ` . To test out the other examples, use the
3535respective ` index.jsx ` as an argument instead.)
3636
3737## Get started
@@ -58,48 +58,48 @@ export default function App() {
5858}
5959```
6060
61- ` index.js ` is the main entry point for cherry-cola . It will look for an exported function ` main() ` and will
61+ ` index.js ` is the main entry point for cherry-soda . It will look for an exported function ` main() ` and will
6262use the returned value to render HTML. ` App.js ` is an example component.
6363
64- Then, add the cherry-cola jsx runtime to your ` tsconfig.json ` :
64+ Then, add the cherry-soda jsx runtime to your ` tsconfig.json ` :
6565
6666``` json
6767{
6868 "compilerOptions" : {
6969 "jsx" : " react-jsx" ,
70- "jsxImportSource" : " cherry-cola "
70+ "jsxImportSource" : " cherry-soda "
7171 }
7272}
7373```
7474
75- Run ` cherry-cola dev src/index.js ` to start the dev server. Then, visit ` localhost:3000 ` .
75+ Run ` cherry-soda dev src/index.js ` to start the dev server. Then, visit ` localhost:3000 ` .
7676
77- Alternatively, you can use the [ ` cherryCola ()` ] ( #cherrycolaentry -string ) function in your own server to render the app.
77+ Alternatively, you can use the [ ` cherrySoda ()` ] ( #cherrysodaentry -string ) function in your own server to render the app.
7878This also automatically serves the asset files (JavaScript, CSS, images, etc.).
7979For Bun.serve:
8080
8181``` javascript
8282// main.js
83- import cherryCola from ' cherry-cola/bun '
83+ import cherrySoda from ' cherry-soda '
8484
85- const cherryColaApp = cherryCola (' src/index.js' )
85+ const cherrySodaApp = cherrySoda (' src/index.js' )
8686
8787Bun .serve ({
8888 async fetch (req ) {
8989 const url = new URL (req .url )
9090 if (url .pathname .startsWith (' /api' ))
9191 return new Response () // your custom responses
92- return await cherryColaApp (req)
92+ return await cherrySodaApp (req)
9393 },
9494 port: 3000 ,
9595})
9696```
9797
9898[ // ] : # ( ### Dev server ( ; HMR-like) ; )
9999
100- [ //] : # (Cherry-cola doesn't use webpack, so HMR isn't really an option. However, cherry-cola provides a feature ( ; preliminarily
100+ [ //] : # (Cherry-soda doesn't use webpack, so HMR isn't really an option. However, cherry-soda provides a feature ( ; preliminarily
101101called dynamic code synchronisation) ; that reflects changes made to your code in the browser immediately after saving.
102- The ` cherry-cola dev ` command has this activated out of the box.
102+ The ` cherry-soda dev ` command has this activated out of the box.
103103For usage with a custom server use the ` dynamicCodeSynchronisation() ` function.)
104104
105105[ // ] : # ( todo: example )
@@ -122,7 +122,7 @@ the function as an array of the state value and a function to change the state.
122122Here is an [ example] ( /example/counter/App.jsx ) to illustrate all those features:
123123
124124``` javascript
125- import {createRef , createState , doSomething } from ' cherry-cola '
125+ import {createRef , createState , doSomething } from ' cherry-soda '
126126
127127export default function Counter () {
128128 // create a state with an initial value `0`
@@ -173,9 +173,9 @@ export default function Counter() {
173173
174174#### Rendering
175175
176- ##### ` cherryCola (entry: string)`
176+ ##### ` cherrySoda (entry: string)`
177177
178- To render an app, you can use the ` cherryCola ()` function. It returns a request handler for ` Bun.serve() ` and handles
178+ To render an app, you can use the ` cherrySoda ()` function. It returns a request handler for ` Bun.serve() ` and handles
179179compiling / building and watching all the files belonging to your app.
180180
181181** Parameters:**
@@ -190,23 +190,23 @@ compiling / building and watching all the files belonging to your app.
190190
191191#### Entry file
192192
193- Every cherry-cola app has a single entry file. This file exports a function ` main() ` , which returns the main function
194- component (usually called ` <App/> ` ). If this component does not yield a ` <html> ` tag, cherry-cola will automatically
193+ Every cherry-soda app has a single entry file. This file exports a function ` main() ` , which returns the main function
194+ component (usually called ` <App/> ` ). If this component does not yield a ` <html> ` tag, cherry-soda will automatically
195195wrap the resulting HTML in a standard document.
196196
197197[ // ] : # ( todo: create option to turn that off )
198198
199199#### Function components
200200
201- cherry-cola function components look similar to React's function components. They are a function that accept props as a
201+ cherry-soda function components look similar to React's function components. They are a function that accept props as a
202202parameter and return a component. The difference to React's function components is that the function code itself does
203203not get send to the browser. All code in function components gets executed on the server.
204204Internally, function components are called immediately after they change. This can cause unexpected effects for example
205205when a function components writes to a database. To fix that, you can use the
206- [ ` sideEffect() ` ] ( #sideeffectcallback-args-any--void ) function to tell cherry-cola that you want to execute this code
206+ [ ` sideEffect() ` ] ( #sideeffectcallback-args-any--void ) function to tell cherry-soda that you want to execute this code
207207only for a request.
208208If you want to execute code on the component in the browser, you can use the
209- [ ` doSomething() ` ] ( #dosomethingcallback-args-any--void--function-dependencies-any ) function. Cherry-cola collects the
209+ [ ` doSomething() ` ] ( #dosomethingcallback-args-any--void--function-dependencies-any ) function. Cherry-soda collects the
210210code gives as a function to ` doSomething() ` at build time and compiles it together with the other ` doSomething() ` s into
211211one file.
212212
@@ -262,7 +262,7 @@ callback.
262262Returns a new ` Ref ` . Pass this to an element like so:
263263
264264``` javascript
265- import {createRef } from ' cherry-cola '
265+ import {createRef } from ' cherry-soda '
266266
267267function Component () {
268268 const myRef = createRef ()
@@ -306,7 +306,7 @@ and stays at an older version.
306306Example of updating immutable type state:
307307
308308``` javascript
309- import {createState , doSomething } from ' cherry-cola '
309+ import {createState , doSomething } from ' cherry-soda '
310310
311311function App () {
312312 const state = createState (' oldValue' )
@@ -330,7 +330,7 @@ function App() {
330330
331331### Essential built-in components
332332
333- Cherry-cola provides some built-in components that are essential to a document.
333+ Cherry-soda provides some built-in components that are essential to a document.
334334
335335#### ` <Html> `
336336
@@ -344,7 +344,7 @@ rendered inside the `<head>` and potentially replace the generated tags.
344344For example:
345345
346346``` javascript
347- import {Html , Head , Body } from ' cherry-cola '
347+ import {Html , Head , Body } from ' cherry-soda '
348348
349349function App () {
350350 return (
0 commit comments