feat: helia-vue example (#24)

Adds an example built on vue that hits the unixfs api. --------- Co-authored-by: Alex Potsides <alex@achingbrain.net>
ipfs-examples · Apr 5, 2023 · 76a9325 · 76a9325
1 parent 5c9b8b0
commit 76a9325
Show file tree

Hide file tree

Showing 28 changed files with 987 additions and 28 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -25,6 +25,7 @@ jobs:
           - helia-nextjs
           - helia-script-tag
           - helia-vite
+          - helia-vue
           - helia-webpack
     defaults:
       run:
@@ -78,6 +79,7 @@ jobs:
           - helia-nextjs
           - helia-script-tag
           - helia-vite
+          - helia-vue
           - helia-webpack
     steps:
       - uses: convictional/trigger-workflow-and-wait@f69fa9eedd3c62a599220f4d5745230e237904be

diff --git a/examples/helia-vite/src/App.jsx b/examples/helia-vite/src/App.jsx
@@ -1,17 +1,16 @@
-import { React } from 'react'
-import { useState } from 'react'
+import { React, useState } from 'react'
 import './App.css'
 import { useHelia } from '@/hooks/useHelia'
 import { useCommitText } from '@/hooks/useCommitText'
 
-function App() {
-  const [text, setText] = useState("")
+function App () {
+  const [text, setText] = useState('')
   const { error, starting } = useHelia()
   const {
     cidString,
     commitText,
     fetchCommittedText,
-    committedText,
+    committedText
   } = useCommitText()
 
   return (
@@ -20,8 +19,9 @@ function App() {
         id="heliaStatus"
         style={{
           border: `4px solid ${
-            error ? 'red':
-            starting ? 'yellow' : 'green'
+            error
+? 'red'
+            : starting ? 'yellow' : 'green'
           }`,
           paddingBottom: '4px'
         }}

diff --git a/examples/helia-vite/src/hooks/useCommitText.jsx b/examples/helia-vite/src/hooks/useCommitText.jsx
@@ -5,10 +5,10 @@ const encoder = new TextEncoder()
 const decoder = new TextDecoder()
 
 export const useCommitText = () => {
-  const {helia, fs, error, starting } = useHelia()
+  const { helia, fs, error, starting } = useHelia()
   const [cid, setCid] = useState(null)
-  const [cidString, setCidString] = useState("")
-  const [committedText, setCommittedText] = useState("")
+  const [cidString, setCidString] = useState('')
+  const [committedText, setCommittedText] = useState('')
 
   const commitText = useCallback(async (text) => {
     if (!error && !starting) {

diff --git a/examples/helia-vite/src/hooks/useHelia.jsx b/examples/helia-vite/src/hooks/useHelia.jsx
@@ -3,7 +3,5 @@ import { HeliaContext } from '@/provider/HeliaProvider'
 
 export const useHelia = () => {
   const { helia, fs, error, starting } = useContext(HeliaContext)
-  return {helia, fs, error, starting}
+  return { helia, fs, error, starting }
 }
-
-
diff --git a/examples/helia-vite/src/main.jsx b/examples/helia-vite/src/main.jsx
@@ -9,5 +9,5 @@ ReactDOM.createRoot(document.getElementById('root')).render(
     <HeliaProvider>
       <App />
     </HeliaProvider>
-  </React.StrictMode>,
+  </React.StrictMode>
 )
diff --git a/examples/helia-vite/src/provider/HeliaProvider.jsx b/examples/helia-vite/src/provider/HeliaProvider.jsx
@@ -1,4 +1,10 @@
-import { React } from 'react'
+import {
+  React,
+  useEffect,
+  useState,
+  useCallback,
+  createContext
+} from 'react'
 import { createHelia } from 'helia'
 import { createLibp2p } from 'libp2p'
 import { noise } from '@chainsafe/libp2p-noise'
@@ -8,12 +14,6 @@ import { bootstrap } from '@libp2p/bootstrap'
 import { unixfs } from '@helia/unixfs'
 import { MemoryBlockstore } from 'blockstore-core'
 import { MemoryDatastore } from 'datastore-core'
-import {
-  useEffect,
-  useState,
-  useCallback,
-  createContext
-} from 'react'
 import PropTypes from 'prop-types'
 
 export const HeliaContext = createContext({
@@ -23,17 +23,17 @@ export const HeliaContext = createContext({
   starting: true
 })
 
-export const HeliaProvider = ({children}) => {
+export const HeliaProvider = ({ children }) => {
   const [helia, setHelia] = useState(null)
   const [fs, setFs] = useState(null)
   const [starting, setStarting] = useState(true)
   const [error, setError] = useState(null)
 
   const startHelia = useCallback(async () => {
     if (helia) {
-      console.info("helia already started")
+      console.info('helia already started')
     } else if (window.helia) {
-      console.info("found a windowed instance of helia, populating ...")
+      console.info('found a windowed instance of helia, populating ...')
       setHelia(window.helia)
       setFs(unixfs(helia))
       setStarting(false)
@@ -61,10 +61,10 @@ export const HeliaProvider = ({children}) => {
           peerDiscovery: [
             bootstrap({
               list: [
-                "/dnsaddr/bootstrap.libp2p.io/p2p/QmNnooDu7bfjPFoTZYxMNLWUQJyrVwtbZg5gBMjTezGAJN",
-                "/dnsaddr/bootstrap.libp2p.io/p2p/QmQCU2EcMqAqQPR2i9bChDtGNJchTbq5TbXJJ16u19uLTa",
-                "/dnsaddr/bootstrap.libp2p.io/p2p/QmbLHAnMoJPWSCR5Zhtx6BHJX9KiKNN6tpvbUcqanj75Nb",
-                "/dnsaddr/bootstrap.libp2p.io/p2p/QmcZf59bWwK5XFi76CZX8cbJ4BhTzzA3gU1ZjYZcYW3dwt"
+                '/dnsaddr/bootstrap.libp2p.io/p2p/QmNnooDu7bfjPFoTZYxMNLWUQJyrVwtbZg5gBMjTezGAJN',
+                '/dnsaddr/bootstrap.libp2p.io/p2p/QmQCU2EcMqAqQPR2i9bChDtGNJchTbq5TbXJJ16u19uLTa',
+                '/dnsaddr/bootstrap.libp2p.io/p2p/QmbLHAnMoJPWSCR5Zhtx6BHJX9KiKNN6tpvbUcqanj75Nb',
+                '/dnsaddr/bootstrap.libp2p.io/p2p/QmcZf59bWwK5XFi76CZX8cbJ4BhTzzA3gU1ZjYZcYW3dwt'
               ]
             })
           ]

diff --git a/examples/helia-vue/.eslintrc.cjs b/examples/helia-vue/.eslintrc.cjs
@@ -0,0 +1,14 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}
diff --git a/examples/helia-vue/.gitignore b/examples/helia-vue/.gitignore
@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+test-results/
+playwright-report/
diff --git a/examples/helia-vue/.prettierrc.json b/examples/helia-vue/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}
diff --git a/examples/helia-vue/.vscode/extensions.json b/examples/helia-vue/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/examples/helia-vue/README.md b/examples/helia-vue/README.md
@@ -0,0 +1,115 @@
+<p align="center">
+  <a href="https://github.com/ipfs/helia" title="Helia">
+    <img src="https://raw.githubusercontent.com/ipfs/helia/main/assets/helia.png" alt="Helia logo" width="300" />
+  </a>
+</p>
+
+<h3 align="center"><b>Helia with Vue</b></h3>
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/jlord/forkngo/gh-pages/badges/cobalt.png" width="200">
+  <br>
+  <a href="https://ipfs.github.io/helia/modules/helia.html">Explore the docs</a>
+  ·
+  <a href="https://codesandbox.io/p/sandbox/nostalgic-feather-lnu7u8">View Demo</a>
+  ·
+  <a href="https://github.com/ipfs-examples/helia-examples/issues">Report Bug</a>
+  ·
+  <a href="https://github.com/ipfs-examples/helia-examples/issues">Request Feature/Example</a>
+</p>
+
+## 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:
+
+![](./public/demo-vue.gif)
+
+_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://cdn.rawgit.com/jbenet/contribute-ipfs-gif/master/img/contribute.gif)](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