Open corysimmons opened 8 months ago
It uses tests as the basic examples. Personally, I found tests to be very descriptive.
You can find more examples in our repos and here.
The examples are not enough and are not yet close to real-world usage. What kinda of example are you looking for? We'd like to implement a few more demos.
What kinda of example are you looking for? We'd like to implement a few more demos.
Just the most barebones working implementation of something like a text doc using Next.js with their App Router.
// next.config.js
module.exports = {
webpack: function (config) {
config.experiments = {
layers: true,
asyncWebAssembly: true,
};
return config;
},
};
// loro-dev/examples/nextjs/app/page.tsx
import { useState, useEffect } from 'react'
import { Loro, LoroText } from 'loro-crdt'
export default function Page() {
const [textDoc, setTextDoc] = useState()
useEffect(() => {
const doc = new Loro()
const text: LoroText = doc.getText("text")
setTextDoc(text)
}, [])
function handleClick() {
textDoc.insert(0, "Hello world!")
}
return (
<div>
<button onClick={() => handleClick()}>Click me</button>
<pre>{JSON.stringify(textDoc, null, 2)}</pre>
</div>
)
}
Other example ideas that slowly iterate on the getting started one:
But always keeping these as simple as possible (no fancy styling or huge chunks of code that are "best practices" yet).
And then CodeSandbox/StackBlitz and a gif of each demo working on their READMEs.
The idea is the majority of devs use Next.js (App Router) + TypeScript nowadays, and people just want to copy/paste some really terse code and then start tweaking it to learn how it works.
I tried to get Loro working because the features look cool, but I couldn't so I eventually gave up and went to y-sweet and it worked perfectly the first try. :(
Thank you for your feedback. Your input is highly appreciated. We'll add some examples like that next month.
Seems like there are tests here but no example usage.
I'd love to see a really basic Next.js implementation.