open-index/open-npm huggingface dataset:
npm package: @holochain-syn/client
Description: A simple wrapper class that implements the interface for the `syn` zome.
Latest version: 0.601.3

# @holochain-syn/client

A simple wrapper class that implements the interface for the `syn` zome.

## Usage

```js
import { AppWebsocket, AppWebsocket } from '@holochain/client';
import { SynClient } from '@holochain-syn/client';

const appWs = await AppWebsocket.connect(url);
const client = await AppWebsocket.connect(appWs, 'syn-app-id')
const client = new SynClient(client, 'syn-zome-name', 'syn-role-name', signal =>
  handleSignal(this.#workspace, signal)
);

const sessionInfo = await client.newSession();
```
npm package: @holochain-syn/core
Description: Core package to easily build `syn` Holochain applications.
Latest version: 0.601.3

# @holochain-syn/core

Core package to easily build `syn` Holochain applications.

## Installing

Install the necessary dependencies:

```bash
npm install @holochain-open-dev/profiles @holochain-syn/core
```

**Note:** Syn uses Automerge, which depends on WebAssembly (WASM). Some build tools and bundlers require additional configuration to properly handle WASM modules.

**For Vite users:**
Add the WASM plugin to your development dependencies in `package.json`:
```json
{
  "devDependencies": {
    "vite-plugin-wasm": "^3.5.0"
  }
}
```

Configure the plugin in your `vite.config.ts`:
```ts
import { defineConfig } from 'vite';
import wasm from 'vite-plugin-wasm';

export default defineConfig({
  plugins: [wasm()],
});
```

## Usage

First, you need to have instantiated a `SynStore` from [@holochain-syn/store](https://npmjs.com/package/@holochain-syn/store) and a `ProfilesStore` from [@holochain-open-dev/profiles](https://holochain-open-dev.github.io/profiles/guides/frontend/profiles-store/).

### Defining the Context Providers

```ts
// Define the <profiles-context> element
import '@holochain-open-dev/profiles/dist/elements/profiles-context.js';

// Define the <syn-context> element
import '@holochain-syn/core/dist/elements/syn-context.js';
```

Now define the <profiles-context> and the <syn-context> element and add it to your html wrapping the whole section of your page in which you are going to be placing the elements from @holochain-syn/elements:

```html
<profiles-context id="profiles-context"> 
  <syn-context>
    <!-- The rest of your application goes here -->
  </syn-context>
</profiles-context>
```

### Connect the Store to the Context Providers

Go to [this page](https://holochain-open-dev.github.io/reusable-modules/frontend/frameworks/), select the framework you are using, and follow its example in order to:

- Connect the `ProfilesStore` to the <profiles-context> with id="profiles-context".
- Connect the `SynStore` to the <syn-context>.
npm package: @holochain-syn/elements
Description: Collection of custom elements to easily build `syn` applications.
Latest version: 0.0.6

# @holochain-syn/elements

Collection of custom elements to easily build `syn` applications.

This package is using the modular pattern described in https://holochain-open-dev.github.io.

These elements depend on having a [syn store](https://npmjs.com/package/@holochain-syn/store) and a [profiles store](https://holochain-open-dev.github.io/profiles/guides/frontend/profiles-store/) defined.

## Installing

Install the necessary dependencies:

```bash
npm install @holochain-open-dev/profiles @holochain-syn/elements
```

## Usage

First, you need to have instantiated a `SynStore` from [@holochain-syn/store](https://npmjs.com/package/@holochain-syn/store) and a `ProfilesStore` from [@holochain-open-dev/profiles](https://holochain-open-dev.github.io/profiles/guides/frontend/profiles-store/).

### Defining the Context Providers

```ts
// Define the <profiles-context> element
import '@holochain-open-dev/profiles/profiles-context';

// Define the <syn-context> element
import { SynContext } from '@holochain-syn/elements';
customElements.define('syn-context', SynContext);
```

Now define the <profiles-context> and the <syn-context> element and add it to your html wrapping the whole section of your page in which you are going to be placing the elements from @holochain-syn/elements:

```html
<profiles-context id="profiles-context"> 
  <syn-context>
    <syn-sessions> </syn-sessions>
  </syn-context>
</profiles-context>
```

### Connect the Store to the Context Providers

Go to [this page](https://holochain-open-dev.github.io/reusable-modules/frontend/frameworks/), select the framework you are using, and follow its example in order to:

- Connect the `ProfilesStore` to the <profiles-context> with id="profiles-context".
- Connect the `SynStore` to the <syn-context>.
npm package: @holochain-syn/text-editor
Description: A `syn` text editor grammar and editor element, to easily build real-time collaborative text editors in Holochain.
Latest version: 0.601.3

# @holochain-syn/text-editor

A `syn` text editor grammar and editor element, to easily build real-time collaborative text editors in Holochain.

You can use the text-editor and its grammar as the only state in your `syn` application, or use it as a subcomponent of a larger state in your application.

## Using the Grammar

### As the Standalone grammar in your Syn app

```ts
import { textEditorGrammar } from '@holochain-syn/text-editor';
import { SynStore } from '@holochain-syn/store';

// ... instantiate the client

const store = new SynStore(client, textEditorGrammar);
```

### Including the Grammar into your own Grammar

```ts
import { SynGrammar } from '@syn/store';
import { textEditorGrammar, TextEditorState } from '@holochain-syn/text-editor';

interface DocumentState {
  title: string;
  body: TextEditorState;
}

type DocumentState =
  | {
      type: 'SetTitle';
      title: string;
    }
  | {
      type: 'TextEditorDelta';
      textEditorDelta: TextEditorDelta;
    };

type DocumentGrammar = SynGrammar<CounterState, CounterDelta>;

const DocumentGrammar: DocumentGrammar = {
  initialState: {
    title: '',
    body: textEditorGrammar.initialState,
  },
  applyDelta(
    state: CounterState,
    delta: CounterDelta,
    author: AgentPubKeyB64
  ): CounterState {
    if (delta.type === 'SetTitle') {
      return {
        title: delta.title,
        ...state,
      };
    } else {
      return {
        body: textEditorGrammar.applyDelta(
          state.body,
          delta.textEditorDelta,
          author
        ),
        ...state,
      };
    }
  },
};
```

## Using the <syn-text-editor> element.

1. Attach the context as seen in [the context section of @holochain-syn/elements](https://npmjs.com/package/@holochain-syn/elements).
2. Define the element:

```ts
import '@holochain-syn/text-editor/dist/elements/syn-markdown-editor.js';
```

3. Include it in your html:

```html
<syn-context>
  <syn-markdown-editor id="text-editor"></syn-markdown-editor>
</syn-context>
```

4. Instantiate and pass it its `SynSlice`:

```ts
import { TextEditorGrammar } from '@holochain-syn/text-editor';
import { derived } from '@holochain-open-dev/stores';

function textEditorSlice(
  store: SynStore<DocumentGrammar>
): SynSlice<TextEditorGrammar> {
  return {
    state: derived(this.sessionStore.state, document => document.body),
    requestChanges(deltas: TextEditorDelta[]) {
      const documentDeltas = deltas.map(d => ({
        type: 'TextEditorDelta',
        textEditorDelta: d,
      }));
      return this.sessionStore.requestChanges(documentDeltas);
    },
  };
}

const slice = textEditorSlice(store);

// Here you can also pass the slice as an input if you're using any JS framework
document.getElementById('text-editor').synSlice = slice;
```