language-servers/harper
1
0
Fork 0
mirror of https://github.com/Automattic/harper.git synced 2025-12-23 08:48:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(harper.js): create simple examples for Node.js and with a CDN

Browse source
This commit is contained in:
Elijah Potter 2024-12-30 10:40:21 -07:00
parent a6bb13cbb4
commit 09d1466caa
7 changed files with 126 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

5
justfile
View file

@ -29,6 +29,11 @@ test-harperjs:
yarn playwright install
yarn test
# Test runnable examples
cd "{{justfile_directory()}}/packages/harper.js/examples/commonjs-simple"
yarn install
yarn start
# Compile the website's dependencies and start a development server. Note that if you make changes to `harper-wasm`, you will have to re-run this command.
dev-web:
#! /bin/bash

11
packages/harper.js/examples/commonjs-simple/README.md Normal file
View file

@ -0,0 +1,11 @@
# `commonjs-simple`
An example of using `harper.js` in a Node.js application.
Read the source code in `index.cjs` to see what's going on.
You can run it using Yarn:
```
yarn install
yarn start
```

28
packages/harper.js/examples/commonjs-simple/index.cjs Normal file
View file

@ -0,0 +1,28 @@
let harper = require('harper.js');
async function main() {
// We cannot use `WorkerLinter` on Node.js since it relies on web-specific APIs.
let linter = new harper.LocalLinter();
let lints = await linter.lint('This is a example of how to use `harper.js`.');
console.log('Here are the results of linting the above text:');
for (let lint of lints) {
console.log(' - ', lint.span().start, ':', lint.span().end, lint.message());
if (lint.suggestion_count() != 0) {
console.log('Suggestions:');
for (let sug of lint.suggestions()) {
console.log(
'\t - ',
sug.kind() == 1 ? 'Remove' : 'Replace with',
sug.get_replacement_text()
);
}
}
}
}
main();

11
packages/harper.js/examples/commonjs-simple/package.json Normal file
View file

@ -0,0 +1,11 @@
{
"name": "commonjs-simple",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node index.cjs"
},
"dependencies": {
"harper.js": "^0.13.0"
}
}

14
packages/harper.js/examples/commonjs-simple/yarn.lock Normal file
View file

@ -0,0 +1,14 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
harper.js@^0.13.0:
version "0.13.0"
resolved "https://registry.yarnpkg.com/harper.js/-/harper.js-0.13.0.tgz#f9e945c842f4e07e1b7042e3eef00a8040b2e0dd"
integrity sha512-XjiQG7kpooKCU2xp46mvNra9PUq5n3z5kXOaWvKjOBRyWIllvuEwvDv40cEUODhWD2ABVTEMea8odXRORfyruw==
dependencies:
wasm "link:../../../../../../.cache/yarn/v6/npm-harper-js-0.13.0-f9e945c842f4e07e1b7042e3eef00a8040b2e0dd-integrity/harper-wasm/pkg"
"wasm@link:../../harper-wasm/pkg":
version "0.0.0"
uid ""

4
packages/harper.js/examples/raw-web/README.md Normal file
View file

@ -0,0 +1,4 @@
# `raw-web`
An example of using `harper.js` in a raw HTML webpage.
You can open it using [`microserver`](https://crates.io/crates/microserver):

53
packages/harper.js/examples/raw-web/index.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="module">
import {WorkerLinter} from "https://unpkg.com/harper.js@0.13.0/dist/harper.js"
let linter = new WorkerLinter();
async function onInput(e) {
let lints = await linter.lint(e.target.value);
let list = document.getElementById("errorlist");
// Clear previous results
list.innerHTML = '';
for (let lint of lints) {
let item = document.createElement("LI");
var text = document.createTextNode(lint.message());
item.appendChild(text);
list.appendChild(item);
}
}
let inputField = document.getElementById("maininput");
inputField.addEventListener("input", onInput);
onInput({target: inputField})
</script>
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
</head>
<body>
<h1>Demo</h1>
<p>
This page is a simple example of using <code>harper.js</code> on a plain HTML page with a CDN.
It isn't pretty, but it demonstrates the fundamentals of using Harper.
Start typing in the text box below to start getting suggestions right in your browser.
</p>
<textarea id="maininput">This is an test</textarea>
<h2>Errors</h2>
<ul id="errorlist">
Loading
</ul>
</body>
</html>