+
+## Table of Contents
+
+- [Table of Contents](#table-of-contents)
+- [About The Project](#about-the-project)
+- [Getting Started](#getting-started)
+ - [Prerequisites](#prerequisites)
+ - [Installation and Running example](#installation-and-running-example)
+- [Usage](#usage)
+- [Documentation](#documentation)
+- [Contributing](#contributing)
+- [Want to hack on IPFS?](#want-to-hack-on-ipfs)
+
+## About The Project
+
+- Read the [docs](https://ipfs.github.io/helia/modules/helia.html)
+- Look into other [examples](https://github.com/ipfs-examples/helia-examples) to learn how to spawn a Helia node in Node.js and in the Browser
+- Visit https://dweb-primer.ipfs.io to learn about IPFS and the concepts that underpin it
+- Head over to https://proto.school to take interactive tutorials that cover core IPFS APIs
+- Check out https://docs.ipfs.io for tips, how-tos and more
+- See https://blog.ipfs.io for news and more
+- Need help? Please ask 'How do I?' questions on https://discuss.ipfs.io
+
+## Getting Started
+
+### Prerequisites
+
+Make sure you have installed all of the following prerequisites on your development machine:
+
+- Git - [Download & Install Git](https://git-scm.com/downloads). OSX and Linux machines typically have this already installed.
+- Node.js - [Download & Install Node.js](https://nodejs.org/en/download/) and the npm package manager.
+
+### Installation and Running example
+
+```console
+> npm install
+> npm start
+or
+> npm run dev
+```
+To run the test
+
+```console
+npm run test:e2e
+```
+
+Now open your browser at `http://localhost:5173`
+
+## Usage
+
+In this example, you will find a boilerplate you can use to guide yourself into creating a react+vite app with helia, this provides a pattern to reuse the same client across components with the context API and suggests how to integrate it with custom hooks
+
+You should see the following:
+
+
+
+_For more examples, please refer to the [Documentation](#documentation)_
+
+## Documentation
+
+- [IPFS Primer](https://dweb-primer.ipfs.io/)
+- [IPFS Docs](https://docs.ipfs.io/)
+- [Tutorials](https://proto.school)
+- [More examples](https://github.com/ipfs-examples/helia-examples)
+- [API - Helia](https://ipfs.github.io/helia/modules/helia.html)
+- [API - @helia/unixfs](https://ipfs.github.io/helia-unixfs/modules/helia.html)
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+1. Fork the IPFS Project
+2. Create your Feature Branch (`git checkout -b feature/amazing-feature`)
+3. Commit your Changes (`git commit -a -m 'feat: add some amazing feature'`)
+4. Push to the Branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## Want to hack on IPFS?
+
+[](https://github.com/ipfs/community/blob/master/CONTRIBUTING.md)
+
+The IPFS implementation in JavaScript needs your help! There are a few things you can do right now to help out:
+
+Read the [Code of Conduct](https://github.com/ipfs/community/blob/master/code-of-conduct.md) and [JavaScript Contributing Guidelines](https://github.com/ipfs/community/blob/master/CONTRIBUTING_JS.md).
+
+- **Check out existing issues** The [issue list](https://github.com/ipfs/helia/issues) has many that are marked as ['help wanted'](https://github.com/ipfs/helia/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22help+wanted%22) or ['difficulty:easy'](https://github.com/ipfs/helia/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3Adifficulty%3Aeasy) which make great starting points for development, many of which can be tackled with no prior IPFS knowledge
+- **Look at the [Helia Roadmap](https://github.com/ipfs/helia/blob/main/ROADMAP.md)** This are the high priority items being worked on right now
+- **Perform code reviews** More eyes will help
+ a. speed the project along
+ b. ensure quality, and
+ c. reduce possible future bugs
+- **Add tests**. There can never be enough tests
+
+[cid]: https://docs.ipfs.tech/concepts/content-addressing "Content Identifier"
+[Uint8Array]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array
+[libp2p]: https://libp2p.io
\ No newline at end of file
diff --git a/examples/helia-vue/e2e/vue.spec.js b/examples/helia-vue/e2e/vue.spec.js
new file mode 100644
index 00000000..d00398aa
--- /dev/null
+++ b/examples/helia-vue/e2e/vue.spec.js
@@ -0,0 +1,92 @@
+import { playwright } from 'test-util-ipfs-example'
+const { test, expect } = require('@playwright/test');
+
+const play = test.extend({
+ ...playwright.servers()
+})
+
+play.describe("Use Helia with Vue", () => {
+ play.beforeEach(async ({ servers, page }) => {
+ await page.goto(`http://localhost:${servers[0].port}/`)
+ })
+
+ play('should properly initialize Helia, and add/get a file', async ({ page }) => {
+ const exampleText = 'Hello Helia'
+ const exampleDirName = 'newdir'
+ const exampleFileName = 'test.txt'
+
+ const status = page.locator('#heliaStatus')
+ await expect(status).toHaveCSS(
+ 'background-color',
+ 'rgb(0, 128, 0)',
+ {timeout: 5000}
+ )
+
+ await page.fill('#commitText', exampleText)
+ await page.click('#commitTextButton')
+ const cidOutput = page.locator('#commitTextCidOutput')
+ await expect(cidOutput).toHaveText(
+ 'cid: bafkreig7i5kbqdnoooievvfextf27eoherluxe2pi3j26hu6zpiauydydy',
+ {timeout: 2000}
+ )
+
+ await page.click('#fetchCommitedTextButton')
+ const textOutput = page.locator('#fetchedCommitedTextOutput')
+ await expect(textOutput).toHaveText(
+ `added text: ${exampleText}`,
+ {timeout: 2000}
+ )
+
+ await page.fill('#newDirInput', exampleDirName)
+ await page.click('#newDirButton')
+ const dirOutput = page.locator('#newDirOutput')
+ await expect(dirOutput).toHaveText(
+ 'directory Cid: bafybeif5hfzip34o7ocwfg4ge537g7o3nbh3auc3s54l3gsaantucqyyra',
+ {timeout: 2000}
+ )
+
+ await page.click("#statDirButton")
+ const statDir = page.locator('#statDirOutput')
+ await expect(statDir).toContainText(
+ 'bafybeiczsscdsbs7ffqz55asqdf3smv6klcw3gofszvwlyarci47bgf354',
+ {timeout: 2000}
+ )
+
+ await page.click('#getDirButton')
+ const lsDir = await page.locator('#dirListOutput')
+ await expect(lsDir).toContainText(
+ 'bafybeif5hfzip34o7ocwfg4ge537g7o3nbh3auc3s54l3gsaantucqyyra/newdir',
+ {timeout: 2000}
+ )
+
+ await page.fill('#fileNameInput', exampleFileName)
+ await page.fill('#fileContentInput', exampleText)
+ await page.click('#newFileButton')
+ const fileCidOutput = page.locator('#fileCidOutput')
+ await expect(fileCidOutput).toContainText(
+ 'bafkreig7i5kbqdnoooievvfextf27eoherluxe2pi3j26hu6zpiauydydy',
+ {timeout: 2000}
+ )
+ const updatedDirOutput = page.locator('#updatedDirOutput')
+ await expect(updatedDirOutput).toContainText(
+ 'bafybeie6lhtnjvea4j7imyx5lp2c7kfgxjkndc4jjpmcetnkq75lapmgwm',
+ {timeout: 2000}
+ )
+
+ await page.click('#dirContentsButton')
+ const dirContentsOutput = page.locator('#dirContentsOutput')
+ await expect(dirContentsOutput).toContainText(
+ 'bafkreig7i5kbqdnoooievvfextf27eoherluxe2pi3j26hu6zpiauydydy',
+ {timeout: 2000}
+ )
+ await page.click('#fileContentsButton')
+ const fileContentsOutput = page.locator('#fileContentsOutput')
+ await expect(fileContentsOutput).toContainText(
+ exampleText,
+ {timeout: 2000}
+ )
+
+ })
+})
+
+
diff --git a/examples/helia-vue/index.html b/examples/helia-vue/index.html
new file mode 100644
index 00000000..99f583aa
--- /dev/null
+++ b/examples/helia-vue/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Vite App
+
+
+
+
+
+
diff --git a/examples/helia-vue/package.json b/examples/helia-vue/package.json
new file mode 100644
index 00000000..023de062
--- /dev/null
+++ b/examples/helia-vue/package.json
@@ -0,0 +1,40 @@
+{
+ "name": "helia-vue",
+ "version": "0.0.0",
+ "description": "Using Helia with vue",
+ "private": true,
+ "scripts": {
+ "start": "vite",
+ "build": "vite build",
+ "preview": "vite preview",
+ "test:e2e": "playwright test",
+ "test": "vite build && playwright test",
+ "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+ "format": "prettier --write src/"
+ },
+ "dependencies": {
+ "@chainsafe/libp2p-noise": "^11.0.4",
+ "@chainsafe/libp2p-yamux": "^3.0.7",
+ "@helia/unixfs": "^1.2.1",
+ "@libp2p/bootstrap": "^6.0.3",
+ "@libp2p/websockets": "^5.0.8",
+ "blockstore-core": "^4.1.0",
+ "datastore-core": "^9.1.1",
+ "events": "^3.3.0",
+ "helia": "next",
+ "it-all": "^3.0.1",
+ "libp2p": "^0.43.3",
+ "vue": "^3.2.47"
+ },
+ "devDependencies": {
+ "@playwright/test": "^1.31.1",
+ "@rushstack/eslint-patch": "^1.2.0",
+ "@vitejs/plugin-vue": "^4.0.0",
+ "@vue/eslint-config-prettier": "^7.1.0",
+ "eslint": "^8.34.0",
+ "eslint-plugin-vue": "^9.9.0",
+ "prettier": "^2.8.4",
+ "test-util-ipfs-example": "^1.0.2",
+ "vite": "^4.1.4"
+ }
+}
diff --git a/examples/helia-vue/playwright.config.js b/examples/helia-vue/playwright.config.js
new file mode 100644
index 00000000..ed1ac90a
--- /dev/null
+++ b/examples/helia-vue/playwright.config.js
@@ -0,0 +1,106 @@
+// @ts-check
+const { devices } = require('@playwright/test')
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ * @type {import('@playwright/test').PlaywrightTestConfig}
+ */
+const config = {
+ testDir: './e2e',
+ /* Maximum time one test can run for. */
+ timeout: 30 * 1000,
+ expect: {
+ /**
+ * Maximum time expect() should wait for the condition to be met.
+ * For example in `await expect(locator).toHaveText();`
+ */
+ timeout: 5000
+ },
+ /* Fail the build on CI if you accidentally left test.only in the source code. */
+ forbidOnly: Boolean(process.env.CI),
+ /* Retry on CI only */
+ retries: process.env.CI ? 2 : 0,
+ /* Opt out of parallel tests on CI. */
+ workers: process.env.CI ? 1 : undefined,
+ /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+ reporter: 'html',
+ /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+ use: {
+ /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+ actionTimeout: 0,
+ /* Base URL to use in actions like `await page.goto('/')`. */
+ baseURL: 'http://localhost:5173',
+
+ /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+ trace: 'on-first-retry',
+
+ /* Only on CI systems run the tests headless */
+ headless: Boolean(process.env.CI)
+ },
+
+ /* Configure projects for major browsers */
+ projects: [
+ {
+ name: 'chromium',
+ use: {
+ ...devices['Desktop Chrome']
+ }
+ },
+ {
+ name: 'firefox',
+ use: {
+ ...devices['Desktop Firefox']
+ }
+ },
+
+ /* Test against mobile viewports. */
+ // {
+ // name: 'Mobile Chrome',
+ // use: {
+ // ...devices['Pixel 5'],
+ // },
+ // },
+ // {
+ // name: 'Mobile Safari',
+ // use: {
+ // ...devices['iPhone 12'],
+ // },
+ // },
+
+ /* Test against branded browsers. */
+ // {
+ // name: 'Microsoft Edge',
+ // use: {
+ // channel: 'msedge',
+ // },
+ // },
+ // {
+ // name: 'Google Chrome',
+ // use: {
+ // channel: 'chrome',
+ // },
+ // },
+ ],
+
+ /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+ // outputDir: 'test-results/',
+
+ /* Run your local dev server before starting the tests */
+ webServer: {
+ /**
+ * Use the dev server by default for faster feedback loop.
+ * Use the preview server on CI for more realistic testing.
+ */
+ command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
+ port: 5173,
+ reuseExistingServer: !process.env.CI
+ }
+}
+
+module.exports = config
diff --git a/examples/helia-vue/public/demo-vue.gif b/examples/helia-vue/public/demo-vue.gif
new file mode 100644
index 00000000..2e3f2dac
Binary files /dev/null and b/examples/helia-vue/public/demo-vue.gif differ
diff --git a/examples/helia-vue/public/favicon.ico b/examples/helia-vue/public/favicon.ico
new file mode 100644
index 00000000..df36fcfb
Binary files /dev/null and b/examples/helia-vue/public/favicon.ico differ
diff --git a/examples/helia-vue/src/App.vue b/examples/helia-vue/src/App.vue
new file mode 100644
index 00000000..e8c1e888
--- /dev/null
+++ b/examples/helia-vue/src/App.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+