Skip to content

Commit 07e7242

Browse files
barelyhumanbarelyhuman
committed
web paper work
1 parent 309d67c commit 07e7242

File tree

11 files changed

+633
-1
lines changed

11 files changed

+633
-1
lines changed

‎.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
node_modules
22
dist
3-
.DS_Store
3+
.DS_Store

‎docs/index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>babel-plugin-mutable-react-state</title>
8+
<link rel="stylesheet" href="./styles/compiled/source.css" />
9+
<link rel="stylesheet" href="./styles/compiled/utils.css" />
10+
<link
11+
rel="stylesheet"
12+
href="//unpkg.com/@highlightjs/[email protected]/styles/base16/chalk.min.css"
13+
/>
14+
</head>
15+
<body>
16+
<header class="navbar">
17+
<h1 class="site-title">
18+
<a href="/">babel-plugin-mutable-react-state</a>
19+
</h1>
20+
<nav>
21+
<ul>
22+
<li>
23+
<a href="#/">About</a>
24+
</li>
25+
<li>
26+
<a href="#/features">Features</a>
27+
</li>
28+
<li>
29+
<a href="#/docs">Documentation</a>
30+
</li>
31+
<li>
32+
<a
33+
href="https://github.com/barelyhuman/babel-plugin-mutable-react-state"
34+
>Github</a
35+
>
36+
</li>
37+
</ul>
38+
</nav>
39+
</header>
40+
<div class="container" id="app"></div>
41+
<noscript>
42+
Contrary to my other websites, this is a very JS dependent website, please
43+
turn on JS if you can...
44+
</noscript>
45+
<script src="//unpkg.com/@highlightjs/[email protected]/highlight.min.js"></script>
46+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
47+
<script src="main.js"></script>
48+
</body>
49+
</html>

‎docs/main.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
window.addEventListener('load', router)
2+
window.addEventListener('hashchange', router)
3+
4+
function router(_event) {
5+
const currLocation = window.location
6+
switch (currLocation.hash) {
7+
case '': {
8+
window.location.hash = '#/'
9+
break
10+
}
11+
case '#/': {
12+
readFile('home.md')
13+
break
14+
}
15+
default: {
16+
readFile(
17+
window.location.hash.replace('#/', '').replace('.md', '') + '.md'
18+
)
19+
break
20+
}
21+
}
22+
}
23+
24+
function readFile(file) {
25+
const isGithub = window.location.origin === 'https://barelyhuman.github.io'
26+
const repoName = isGithub ? 'babel-plugin-mutable-react-state' : ''
27+
const url = `${window.location.origin}/${repoName}/pages/${file}`
28+
fetch(url)
29+
.then((res) => res.text())
30+
.then((data) => {
31+
var parser = new DOMParser()
32+
var doc = parser.parseFromString(marked.parse(data), 'text/html')
33+
document.getElementById('app').replaceChildren(doc.body)
34+
hljs.highlightAll()
35+
})
36+
}

‎docs/pages/docs.md

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
## Documentation
2+
3+
### Getting Started
4+
5+
Just like any other babel plugin, you install it and then add it to your `.babelrc`
6+
7+
```sh
8+
npm i -D babel-plugin-mutable-react-state
9+
# or
10+
yarn add -D babel-plugin-mutable-react-state</pre>
11+
```
12+
13+
```json
14+
// .babelrc
15+
{
16+
"plugins": ["babel-plugin-mutable-react-state"]
17+
}
18+
```
19+
20+
### Usage
21+
22+
As shown in the visual example in features, the basic usage involves adding a `$` prefix to your state variables.
23+
The plugin will then convert it to a **state value,setter pair**
24+
25+
```js
26+
function Component() {
27+
let $count = 1
28+
}
29+
// ↓ ↓ ↓
30+
31+
function Component() {
32+
const [count, setCount] = React.useState(1)
33+
}
34+
```
35+
36+
### Advanced Usage and Workflows
37+
38+
1. You have to realise that this is still a react contextual state and should be treated as one.
39+
40+
```js
41+
function Component() {
42+
let $text = ''
43+
let $textLength = 0
44+
45+
// handle dependent state updates in useEffect
46+
React.useEffect(() => {
47+
$textLength = $text.length
48+
}, [$text])
49+
50+
return (
51+
<>
52+
<textarea
53+
onChange={(e) => {
54+
$text = e.target.value
55+
}}
56+
/>
57+
</>
58+
)
59+
}
60+
```
61+
62+
2. The current implementation of the plugin does support **self-dependent** state updates
63+
64+
<small class="text-accent">(Added in: v0.0.2)</small>
65+
66+
```js
67+
function Component() {
68+
let $text = ''
69+
70+
const onChange = (e) => {
71+
// update the value
72+
$text = e.target.value //=> eg: `hello`
73+
// convert the new value to upper case
74+
$text = $text.toUpperCase() //=> HELLO
75+
}
76+
77+
return (
78+
<>
79+
<textarea onChange={onChange} />
80+
</>
81+
)
82+
}
83+
```
84+
85+
3. Working with numbers is simple and works as any mutable number variable
86+
87+
```
88+
function Component() {
89+
let $count = 1; // declare a reactive variable using the `$` prefix
90+
91+
const onUpdate = () => {
92+
// will increment by 2
93+
$count += 2;
94+
95+
// will set the count to 2
96+
$count = 2;
97+
98+
// will increment by 1
99+
$count++;
100+
101+
// will decrement by 1
102+
$count--;
103+
104+
// will multiply by 1
105+
$count *= 2;
106+
};
107+
108+
return <>{$count}</>;
109+
}
110+
```
111+
112+
4. There's obviously cases where you'd want to have a custom arrow function handle the state update `setState((prevState)=>{return newState})`. This can be achieved with a simple arrow function assigned to the state variable
113+
114+
```js
115+
/*
116+
naive , but you can basically do anything,
117+
as long as you return a new value / new instance
118+
*/
119+
$name = (prevName) => prevName.toUpperCase()
120+
```

‎docs/pages/features.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<section id="features" class="container">
2+
<h2 class="my-1">Features</h2>
3+
<p class="my-1">
4+
Basically a list of things that <strong>do work</strong> instead of the
5+
one's that don't, which you can find in the list of
6+
<a
7+
class="link"
8+
href="https://github.com/barelyhuman/babel-plugin-mutable-react-state/issues/4"
9+
>Caveats</a
10+
>
11+
</p>
12+
<ul>
13+
<li>
14+
Numeric Assignments (<code>$count+=1</code>,<code>$count-=1</code>)
15+
</li>
16+
<li>
17+
Numeric Updates (<code>$count++</code>,<code>$count--</code>)
18+
<small class="text-accent">Added in: v0.0.2</small>
19+
</li>
20+
<li>
21+
State Functions <small class="text-accent">Added in: v0.0.2</small>
22+
</li>
23+
<li>
24+
Dependent Updates <small class="text-accent">Added in: v0.0.2</small>
25+
</li>
26+
</ul>
27+
<p>I'd say a visual example would actually help a lot of people.</p>
28+
29+
```
30+
function Component() {
31+
let $count = 1; // declare a reactive variable using the `$` prefix
32+
33+
const onUpdate = () => {
34+
// will increment by 2
35+
$count += 2;
36+
37+
// will set the count to 2
38+
$count = 2;
39+
40+
// will increment by 1
41+
$count++;
42+
43+
// will decrement by 1
44+
$count--;
45+
46+
// will multiply by 1
47+
$count *= 2;
48+
49+
// will set the state to whatever
50+
$count = "Hello World";
51+
52+
// will use the provided function to get the latest state aka the return value of the function
53+
// `x` here is the currentState
54+
$count = (x) => x + 1 - (2 * 4) / 100;
55+
};
56+
57+
return <>{$count}</>;
58+
}
59+
```

‎docs/pages/home.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
## About
2+
3+
This plugin is a result of a question on twitter by
4+
<a
5+
class="link"
6+
href="https://twitter.com/Baconbrix/status/1470900742613467138">Evan Bacon</a>
7+
and my impulsive nature
8+
9+
Started out as a simple hack and is now being used in no project (ha!),
10+
it's still a very incomplete plugin as the name `mutable` is
11+
a lot more complex than just converting a few variable to state hooks.
12+
13+
Anyhow, this is currently **WIP** and aggressively being
14+
developed so if you do decide to use it, I'd consider using strict
15+
version checks on your `package.json`
16+
17+
<p align="center">
18+
<a href="/#/docs" class="link section-title">Get Started →</a>
19+
</p>

‎docs/purgecss.config.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
module.exports = {
2+
content: ['index.html'],
3+
css: ['styles/*.css'],
4+
output: ['styles/compiled'],
5+
safelist: [
6+
'pre',
7+
'h1',
8+
'h2',
9+
'h3',
10+
'pre',
11+
'a',
12+
'p',
13+
'code',
14+
'li',
15+
'ol',
16+
'link',
17+
'text-accent',
18+
],
19+
}

0 commit comments

Comments
 (0)