braid-text 0.0.2 → 0.0.5

package/README.md

@@ -12,7 +12,25 @@ This library provides a simple http route handler, along with client code, enabl
   - Fast / Robust / Extensively fuzz-tested 
 - Developed in [braid.org](https://braid.org)
 
-## Use the Library on the Server
+### Demo: a Wiki!
+
+This will run a collaboratively-editable wiki:
+
+```shell
+npm install
+node server-demo.js
+```
+
+Now open these URLs in your browser:
+  - http://localhost:8888/demo (to see the demo text)
+  - http://localhost:8888/demo?editor (to edit the text)
+  - http://localhost:8888/demo?markdown-editor (to edit it as markdown)
+
+Or try opening the URL in [Braid-Chrome](https://github.com/braid-org/braid-chrome), or another Braid client, to edit it directly!
+
+Check out the `server-demo.js` file to see examples for how to add access control, and a `/pages` endpoint to show all the edited pages.
+
+## General Use on Server
 
 Install it in your project:
 ```shell
@@ -32,25 +50,7 @@ server.on("request", (req, res) => {
 })
 ```
 
-## Run the Demo
-
-This will run a collaboratively-editable wiki:
-
-```shell
-npm install
-node server-demo.js
-```
-
-Now open these URLs in your browser:
-  - http://localhost:8888/demo (to see the demo text)
-  - http://localhost:8888/demo?editor (to edit the text)
-  - http://localhost:8888/demo?markdown-editor (to edit it as markdown)
-
-Or try opening the URL in [Braid-Chrome](https://github.com/braid-org/braid-chrome), or another Braid client, to edit it directly!
-
-Check out the `server-demo.js` file to see examples for how to add access control, and a `/pages` endpoint to show all the edited pages.
-
-## Full Server Library API
+## Server API
 
 `braid_text.db_folder = './braid-text-db' // <-- this is the default`
   - This is where the Diamond-Types history files will be stored for each resource.
@@ -88,35 +88,82 @@ Check out the `server-demo.js` file to see examples for how to add access contro
     - `patches`: <small style="color:lightgrey">[optional]</small> Array of patches, each of the form `{unit: 'text', range: '[1:3]', content: 'hi'}`, which would replace the second and third unicode code-points in the text with `hi`.
     - `peer`: <small style="color:lightgrey">[optional]</small> Identifies this peer. This mutation will not be echoed back to `get` subscriptions that use this same `peer` header.
 
-## Use the Library on the Client
+## General Use on Client
 
-    <script src="https://unpkg.com/braid-text/simpleton-client.js"></script>
-    
-    ...
-    // connect to the server
-    let simpleton = simpleton_client(SERVER_URL, {
-      apply_remote_update: ({ state, patches }) => {
-        // apply incoming state / return new state
-      },
-      generate_local_diff_update: (prev_state) => {
-        // report changes between prev_state and the current state
-      },
-    });
+```html
+<script src="https://unpkg.com/braid-text/simpleton-client.js"></script>
+<script>
+
+  // connect to the server
+  let simpleton = simpleton_client('https://example.org/some-resource', {
+    apply_remote_update: ({ state, patches }) => {
+
+      // Apply the incoming state or patches to local text here.
+
+      // Then return the new state of textarea as a string:
+      return new_state
+    },
+    generate_local_diff_update: (prev_state) => {
+
+      // Compute diff between prev_state ^ and the current textarea string,
+      // which might look like [{
+      //   range: [5:5],
+      //   content: " World"
+      // }] to insert something after a prev_state of "Hello"
+
+      // Then return the new state (as a string) and the diff (as `patches`)
+      return {new_state, patches}
+    },
+  })
     
-    ...
+  ...
     
-    // when changes are made, let the client know
-    simpleton.changed()
+  // When changes occur in client's textarea, let simpleton know,
+  // so that it can call generate_local_diff_update() to ask for them.
+  simpleton.changed()
+
+</script>
+```
 
 See [editor.html](https://raw.githubusercontent.com/braid-org/braid-text/master/editor.html) for a simple working example.
 
-## Full Client Library API
+## Client API
+
+```javascript
+simpleton = simpleton_client(url, options)
+```
+
+- `url`: The URL of the resource to synchronize with.
+- `options`: An object containing the following properties:
+  - `apply_remote_update`: A function that will be called whenever an update is received from the server. It should have the following signature:
+
+    ```javascript
+    ({state, patches}) => {...}
+    ```
+
+    - `state`: If present, represents the new value of the text.
+    - `patches`: If present, an array of patch objects, each representing a string-replace operation. Each patch object has the following properties:
+      - `range`: An array of two numbers, `[start, end]`, specifying the start and end positions of the characters to be deleted.
+      - `content`: The text to be inserted in place of the deleted characters.
+
+    Note that patches will always be in order, but the range positions of each patch reference the original string, i.e., the second patch's range values do not take into account the application of the first patch.
+
+    The function should apply the `state` or `patches` to the local text and return the new state.
+
+  - `generate_local_diff_update`: A function that will be called whenever a local update occurs, but may be delayed if the network is congested. It should have the following signature:
+
+    ```javascript
+    (prev_state) => {...}
+    ```
+
+    The function should calculate the difference between `prev_state` and the current state, and express this difference as an array of patches (similar to the ones described in `apply_remote_update`).
+
+    If a difference is detected, the function should return an object with the following properties:
+    - `new_state`: The current state of the text.
+    - `patches`: An array of patch objects representing the changes.
+
+    If no difference is detected, the function should return `undefined` or `null`.
 
-    simpleton = simpleton_client(url, {
-      apply_remote_update,
-      generate_local_diff_update}
+  - `content_type`: <small style="color:lightgrey">[optional]</small> If set, this value will be sent in the `Accept` and `Content-Type` headers to the server.
 
-  - `url`: The url of the resource to synchronize with.
-  - `apply_remote_update`: This function will be called whenever an update is received from the server. The function should look like `({state, patches}) => {...}`. Only one of `state` or `patches` will be set. If it is `state`, then this is the new value of the text. If it is `patches`, then patches is an array of values like `{range: [1, 3], content: "Hi"}`. Each such value represents a string-replace operation; the `range` specifies a start and end position — these characters will be deleted — and `content` says what text to put in its place. Note that these patches will always be in order, but that the range positions of each patch always reference the original string, e.g., the second patch's range values do not take into account applying the first patch. Finally, this function returns the new state, after the application of the `state` or `patches`.
-  - `generate_local_diff_update`: This function will often be called whenever an update happens locally, but the system may delay calling it if the network is congested. The function should look like `(prev_state) => {...}`. The function should basically do a diff between `prev_state` and the current state, and express this diff as an array of patches similar to the ones discussed above. Finally, if there is an actual difference detected, this function should return an object `{state, patches}`, otherwise it should return nothing.
-  - `simpleton.changed()`: Call this to report local updates whenever they occur, e.g., in the `oninput` handler of a textarea being synchronized.
+- `simpleton.changed()`: Call this function to report local updates whenever they occur, e.g., in the `oninput` event handler of a textarea being synchronized.

package/editor.html

@@ -17,7 +17,7 @@
     generate_local_diff_update: (prev_state) => {
       var patches = diff(prev_state, texty.value);
       if (patches.length === 0) return null;
-      return { patches, state: texty.value };
+      return { patches, new_state: texty.value };
     },
   });
 

package/index.js

@@ -483,6 +483,15 @@ braid_text.put = async (key, options) => {
     await resource.db_delta(resource.doc.getPatchSince(v_before))
 }
 
+braid_text.list = async () => {
+    var pages = new Set()
+    for (let x of await require('fs').promises.readdir(braid_text.db_folder)) {
+        let m = x.match(/^(.*)\.\d+$/)
+        if (m) pages.add(decode_filename(m[1]))
+    }
+    return [...pages.keys()]
+}
+
 async function get_resource(key) {
     let cache = get_resource.cache || (get_resource.cache = {})
     if (cache[key]) return cache[key]
@@ -496,7 +505,7 @@ async function get_resource(key) {
     let { change, delete_me } = braid_text.db_folder
         ? await file_sync(
             braid_text.db_folder,
-            encodeURIComponent(key),
+            encode_filename(key),
             (bytes) => resource.doc.mergeBytes(bytes),
             () => resource.doc.toBytes()
         )
@@ -1260,4 +1269,30 @@ function codePoints_to_index(str, codePoints) {
     return i
 }
 
+function encode_filename(filename) {
+  // Replace all '!' with '%21'
+  let encoded = filename.replace(/!/g, '%21');
+  
+  // Encode the filename using encodeURIComponent()
+  encoded = encodeURIComponent(encoded);
+  
+  // Replace all '%2F' (for '/') with '!'
+  encoded = encoded.replace(/%2F/g, '!');
+  
+  return encoded;
+}
+
+function decode_filename(encodedFilename) {
+  // Replace all '!' with '%2F'
+  let decoded = encodedFilename.replace(/!/g, '%2F');
+  
+  // Decode the filename using decodeURIComponent()
+  decoded = decodeURIComponent(decoded);
+  
+  // Replace all '%21' with '!'
+  decoded = decoded.replace(/%21/g, '!');
+  
+  return decoded;
+}
+
 module.exports = braid_text

package/markdown-editor.html

@@ -45,7 +45,7 @@ var simpleton = simpleton_client(location.pathname, {
     }
     return {
       patches: patches,
-      state: t().value
+      new_state: t().value
     };
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-text",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "Library for collaborative text over http using braid.",
   "author": "Braid Working Group",
   "repository": "braid-org/braidjs",

package/server-demo.js

@@ -27,11 +27,7 @@ var server = require("http").createServer(async (req, res) => {
     // which displays all the currently used keys
     // 
     // if (req.url === '/pages') {
-    //     var pages = new Set()
-    //     for (let x of await require('fs').promises.readdir(db_folder)) {
-    //         let m = x.match(/^(.*)\.\d+$/)
-    //         if (m) pages.add(decodeURIComponent(m[1]))
-    //     }
+    //     var pages = await braid_text.list()
     //     res.writeHead(200, {
     //         "Content-Type": "application/json",
     //         "Access-Control-Allow-Origin": "*",
@@ -39,7 +35,7 @@ var server = require("http").createServer(async (req, res) => {
     //         "Access-Control-Allow-Headers": "*",
     //         "Access-Control-Expose-Headers": "*"
     //     })
-    //     res.end(JSON.stringify([...pages.keys()]))
+    //     res.end(JSON.stringify(pages))
     //     return
     // }
 

package/simpleton-client.js

@@ -9,9 +9,9 @@
 //
 // generate_local_diff_update: (prev_state) => {...}
 //     this is to generate outgoing changes,
-//     and if there are changes, returns { patches, state }
+//     and if there are changes, returns { patches, new_state }
 //
-// content_type: overrides the Accept and Content-Type headers
+// content_type: used for Accept and Content-Type headers
 //
 // returns { changed(): (diff_function) => {...} }
 //     this is for outgoing changes;
@@ -74,7 +74,7 @@ function simpleton_client(url, { apply_remote_update, generate_local_diff_update
         while (true) {
             var update = generate_local_diff_update(prev_state)
             if (!update) return   // Stop if there wasn't a change!
-            var {patches, state} = update
+            var {patches, new_state} = update
 
             // convert from js-indicies to code-points
             let c = 0
@@ -103,7 +103,7 @@ function simpleton_client(url, { apply_remote_update, generate_local_diff_update
 
             var parents = current_version
             current_version = version
-            prev_state = state
+            prev_state = new_state
 
             outstanding_changes++
             await braid_fetch_wrapper(url, {