update docs

.gitattributes

@@ -0,0 +1,8 @@
+src/pages/benchmark/dev/main.js binary
+src/pages/benchmark/dev/main.js.map binary
+
+src/pages/benchmark/html/main.js binary
+src/pages/benchmark/html/main.js.map
+
+src/pages/benchmark/regular/main.js binary
+src/pages/benchmark/regular/main.js.map binary

src/index.jsx

@@ -19,7 +19,7 @@ import 'tm-textarea'
 import './lib/components/code/tm-textarea.css'
 
 // app
-import { render, setClass } from 'pota'
+import { render, setClass, signal } from 'pota'
 
 import { onDocumentSize } from 'pota/plugin/useDocumentSize'
 import { location } from 'pota/plugin/useLocation'

src/pages/@playground/default-example.js

@@ -1,35 +1,18 @@
 export default `
 
-import { render, signal, memo, effect } from 'pota'
-import { html } from 'pota/html'
+import { render, signal, memo } from 'pota'
 
 function Counter() {
   const [count, setCount, updateCount] = signal(1)
 
   const double = memo(() => count() * 2)
   const increment = () => updateCount(count => count + 1)
 
-  // jsx
-  const jsx = (
+  return (
     <button onClick={increment}>
-      jsx {count} / {double}
+      {count} / {double}
     </button>
   )
-
-  // vanilla
-  const vanilla = document.createElement('button')
-  effect(() => {
-    vanilla.textContent = 'vanilla '
-    vanilla.textContent += count() + ' / ' + double()
-  })
-  vanilla.onclick = increment
-
-  // html
-  const htm = html\`<button onclick="\${increment}">
-     html \${count} / \${double}
-    </button>\`
-
-  return [jsx, vanilla, htm]
 }
 
 render(Counter)

src/pages/@playground/index.jsx

@@ -5,7 +5,7 @@ import { Code } from '../../lib/components/code/code.jsx'
 import { Header } from '../../lib/components/header.jsx'
 
 import { effect, memo, signal } from 'pota'
-import { Collapse, For, Head, Show } from 'pota/web'
+import { Collapse, For, Show } from 'pota/web'
 
 import { compress, uncompress } from '../../lib/compress.js'
 import example from './default-example.js'
@@ -84,24 +84,16 @@ export default function () {
 		initialValue.code ? initialValue.code : initialValue,
 	)
 
-	const codeDownload = memo(() =>
+	/*const codeDownload = memo(() =>
 		URL.createObjectURL(
 			new Blob([code()], {
 				type: 'application/tsx',
 			}),
 		),
-	)
+	)*/
 
 	const codeURL = memo(() => compress(code()))
 
-	// transformed code
-
-	const [transformed, setTransformed] = signal('')
-
-	effect(() => {
-		transform(code()).then(setTransformed)
-	})
-
 	effect(() => {
 		window.location.hash = '#' + codeURL()
 	})
@@ -152,34 +144,6 @@ export default function () {
 								Cheat Sheet
 							</a>
 						</span>
-						<span>
-							<a
-								href="javascript://"
-								download="pota.tsx"
-								onClick={e => (e.target.href = codeDownload())}
-							>
-								Download
-							</a>
-						</span>
-						<span>
-							<a
-								target="_blank"
-								href="#"
-								clipboard={e => {
-									e.preventDefault()
-									const node = e.target
-									node.href = '#' + codeURL()
-
-									node.textContent = 'Link Copied!'
-									setTimeout(() => {
-										node.textContent = 'Link'
-									}, 2000)
-									return node.href
-								}}
-							>
-								Link
-							</a>
-						</span>
 						<span>
 							<label
 								flair="selection-none"
@@ -234,12 +198,7 @@ export default function () {
 									value={prettier(code(), true)}
 									onInput={e => setCode(e.target.value)}
 									grammar="tsx"
-									theme={theme()}
-									onMount={element => {
-										effect(() => {
-											element.theme = theme()
-										})
-									}}
+									theme={theme}
 									onKeyDown={e => {
 										if (e.ctrlKey && e.keyCode === 83) {
 											// CTRL + S
@@ -257,32 +216,20 @@ export default function () {
 								/>
 							</Collapse>
 							<Show when={() => tab() === 'pota-jsx'}>
-								{code => (
-									<tm-textarea
-										class="playground line-numbers"
-										grammar="tsx"
-										theme={theme()}
-										onMount={element => {
-											effect(() => {
-												element.theme = theme()
-											})
-										}}
-										value={transformed}
-										editable={false}
-									/>
-								)}
+								<tm-textarea
+									class="playground line-numbers"
+									grammar="tsx"
+									theme={theme}
+									value={() => transform(code())}
+									editable={false}
+								/>
 							</Show>
 							<Collapse when={() => tab() === 'cheatsheet'}>
 								<tm-textarea
 									class="playground"
 									value={prettier(CheatSheetText)}
 									grammar="tsx"
-									theme={theme()}
-									onMount={element => {
-										effect(() => {
-											element.theme = theme()
-										})
-									}}
+									theme={theme}
 									editable={false}
 								/>
 							</Collapse>

src/pages/@props/attributes-properties/index.jsx

@@ -105,21 +105,11 @@ export default function () {
 				</p>
 			</Section>
 
-			<Section title="Locked To Properties">
-				<p>
-					<mark>value</mark>, <mark>textContent</mark>,{' '}
-					<mark>innerText</mark>, <mark>innerHTML</mark> are locked to
-					always use <mark>setProperty</mark>
-				</p>
-			</Section>
-
 			<Section title="Children">
 				<p>
 					<mark>children</mark> as an attribute will be used as long
 					as the node on where it's defined doesn't have any{' '}
-					<mark>childNodes</mark>. <b>Note</b>: <mark>children</mark>{' '}
-					cannot be overridden via a <mark>propsPlugin</mark>.
-					Everything else can be changed.
+					<mark>childNodes</mark>.
 				</p>
 			</Section>
 

src/pages/benchmark/dev/index.jsx

@@ -98,7 +98,10 @@ const Button = ({ id, text, fn }) => (
 const App = () => {
   const [data, setData, updateData] = signal([]),
     [selected, setSelected] = signal(null),
-    run = () => setData(buildData(10)),
+    run = () => {
+      // debugger
+      setData(buildData(10))
+    },
     runLots = () => {
       setData(buildData(10000))
     },
@@ -226,7 +229,7 @@ const App = () => {
               const { id, label } = row
 
               return (
-                <tr class:danger={isSelected(id)}>
+                <tr class={{ danger: isSelected(id) }}>
                   <td
                     class="col-md-1"
                     textContent={id}