Skip to content

Commit

Permalink
refactor: use typescript
Browse files Browse the repository at this point in the history
  • Loading branch information
d4rkr00t committed Dec 2, 2022
1 parent 3062fc5 commit d7e4c58
Show file tree
Hide file tree
Showing 63 changed files with 1,068 additions and 499 deletions.
3 changes: 2 additions & 1 deletion .babelrc
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{
"presets": [
["@babel/preset-env", { "modules": false }],
"@babel/preset-react"
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
Expand Down
22 changes: 22 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier",
],
overrides: [],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
},
plugins: ["react", "@typescript-eslint"],
rules: {
"react/prop-types": "off",
},
};
54 changes: 54 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: CI

on:
push:
branches: ["master"]
pull_request:
branches: ["master"]

jobs:
build:
runs-on: ubuntu-latest

strategy:
matrix:
node-version: [18.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/

steps:
- name: Checkout
uses: actions/checkout@v3

- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 16

- uses: pnpm/action-setup@v2
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false

- name: Get pnpm store directory
id: pnpm-cache
shell: bash
run: |
echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install

- run: pnpm typecheck
3 changes: 1 addition & 2 deletions example/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// aik-mode:react
import applyDevTools from "../src";
import "./editor.css";

Expand All @@ -13,7 +12,7 @@ const plugins = exampleSetup({ schema });
plugins.push(plugin);

const view = new EditorView(document.querySelector("#app"), {
state: EditorState.create({ schema, plugins })
state: EditorState.create({ schema, plugins }),
});

applyDevTools(view);
17 changes: 14 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@
"test": "echo \"No tests yet\"",
"start": "vite ./example",
"prebuild": "rimraf ./dist",
"build": "npm run build:cjs && npm run build:esm",
"build:cjs": "cross-env BABEL_ENV=cjs babel src --out-dir dist/cjs",
"build:esm": "cross-env BABEL_ENV=esm babel src --out-dir dist/esm",
"build": "npm run build:cjs && npm run build:esm && npm run build:types",
"typecheck": "tsc --noEmit",
"build:cjs": "cross-env BABEL_ENV=cjs babel src --out-dir dist/cjs --extensions '.ts,.tsx,.js,.jsx'",
"build:esm": "cross-env BABEL_ENV=esm babel src --out-dir dist/esm --extensions '.ts,.tsx,.js,.jsx'",
"build:types": "tsc --emitDeclarationOnly --declaration --isolatedModules false --outDir dist/types",
"lint:staged": "lint-staged",
"pmm:prepare": "npm run build",
"release:major": "pmm major",
Expand Down Expand Up @@ -54,10 +56,18 @@
"@babel/plugin-transform-runtime": "^7.19.6",
"@babel/preset-env": "^7.19.3",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@types/html": "^1.0.1",
"@types/prop-types": "^15.7.5",
"@types/react": "^16.8.0",
"@types/react-dom": "^16.8.0",
"@typescript-eslint/eslint-plugin": "^5.44.0",
"@typescript-eslint/parser": "^5.44.0",
"@vitejs/plugin-react": "^2.2.0",
"cross-env": "^7.0.3",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "^7.31.11",
"lint-staged": "^13.0.4",
"pmm": "^2.0.0",
"pre-commit": "^1.2.2",
Expand All @@ -68,6 +78,7 @@
"react": "^17.0.0",
"react-dom": "^17.0.0",
"rimraf": "^3.0.2",
"typescript": "^4.9.3",
"vite": "^3.2.4"
},
"pre-commit": [
Expand Down
File renamed without changes.
File renamed without changes.
25 changes: 12 additions & 13 deletions src/components/highlighter.jsx → src/components/highlighter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const CustomPre = styled("pre")({
CustomPre.displayName = "CustomPre";

const regexp = /(<\/?[\w\d\s="']+>)/gim;
const highlight = (str) =>
const highlight = (str: string) =>
str
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
Expand All @@ -22,15 +22,14 @@ const highlight = (str) =>
"<span class='prosemirror-dev-tools-highlighter-tag'>$&</span>"
);

export class Highlighter extends React.Component {
render() {
if (!this.props.children) return null;
return (
<CustomPre
dangerouslySetInnerHTML={{
__html: highlight(this.props.children),
}}
/>
);
}
}
type HighlighterFC = React.FC<{ children: string }>;
export const Highlighter: HighlighterFC = (props) => {
if (!props.children) return null;
return (
<CustomPre
dangerouslySetInnerHTML={{
__html: highlight(props.children),
}}
/>
);
};
File renamed without changes.
33 changes: 19 additions & 14 deletions src/components/json-diff.jsx → src/components/json-diff.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,10 @@ const Added = styled("span")({
});
Added.displayName = "Added";

function postprocessValue(value) {
function postprocessValue(value: Record<string, any>) {
if (value && value._t === "a") {
const res = {};
for (let key in value) {
const res: Record<string, any> = {};
for (const key in value) {
if (key !== "_t") {
if (key[0] === "_" && !value[key.substr(1)]) {
res[key.substr(1)] = value[key];
Expand All @@ -54,11 +54,11 @@ function postprocessValue(value) {
return value;
}

function labelRenderer(raw) {
function labelRenderer(raw: Array<unknown>) {
return raw[0];
}

function stringifyAndShrink(val) {
function stringifyAndShrink(val: null | object) {
if (val === null) {
return "null";
}
Expand All @@ -71,18 +71,18 @@ function stringifyAndShrink(val) {
return str.length > 22 ? `${str.substr(0, 15)}${str.substr(-5)}` : str;
}

function getValueString(raw) {
function getValueString(raw: string | object | null) {
if (typeof raw === "string") {
return raw;
}
return stringifyAndShrink(raw);
}

function replaceSpacesWithNonBreakingSpace(value) {
function replaceSpacesWithNonBreakingSpace(value: string) {
return value.replace(/\s/gm, " ");
}

function parseTextDiff(textDiff) {
function parseTextDiff(textDiff: string) {
const diffByLines = textDiff.split(/\n/gm).slice(1);

return diffByLines.map((line) => {
Expand All @@ -96,7 +96,7 @@ function parseTextDiff(textDiff) {
});
}

function valueRenderer(raw) {
function valueRenderer(raw: Array<any> | string) {
if (Array.isArray(raw)) {
if (raw.length === 1) {
return <Added>{getValueString(raw[0])}</Added>;
Expand All @@ -118,7 +118,7 @@ function valueRenderer(raw) {
if (raw.length === 3 && raw[2] === 2) {
return (
<Updated>
"
&quot;
{parseTextDiff(raw[0]).map((item) => {
if (item.delete) {
return (
Expand All @@ -132,7 +132,7 @@ function valueRenderer(raw) {

return <White key={item.raw + "raw"}>{item.raw}</White>;
})}
"
&quot;
</Updated>
);
}
Expand All @@ -141,11 +141,16 @@ function valueRenderer(raw) {
return "" + raw;
}

export function itemsCountString(count) {
export function itemsCountString(count: number) {
return `${count}`;
}

export function getItemString(type, value, defaultView, keysCount) {
export function getItemString(
type: string,
_value: unknown,
defaultView: unknown,
keysCount: string
) {
switch (type) {
case "Object":
return <span>{"{…}"}</span>;
Expand All @@ -158,7 +163,7 @@ export function getItemString(type, value, defaultView, keysCount) {
}
}

export default function JSONDiff(props) {
export default function JSONDiff(props: { delta: any }) {
if (!props.delta) return null;

return (
Expand Down
9 changes: 0 additions & 9 deletions src/components/json-tree.jsx

This file was deleted.

32 changes: 32 additions & 0 deletions src/components/json-tree.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import type { Mark, MarkType, NodeType } from "prosemirror-model";
import React from "react";
import { JSONTree } from "react-json-tree";
import { jsonTreeTheme } from "../theme";
import { JSONNode } from "../types/prosemirror";

type GetItemString = (
nodeType: string,
data: any,
itemType: React.ReactNode,
itemString: string,
keyPath: (string | number)[]
) => React.ReactNode | string;
type JSONTreeProps = {
data:
| JSONNode
| Record<string, NodeType>
| Record<string, MarkType>
| Array<Mark>;
hideRoot?: boolean;
getItemString?: GetItemString;
shouldExpandNode?: (nodePath: Array<string | number>) => boolean;
postprocessValue?: (data: Record<string, unknown>) => Record<string, unknown>;
valueRenderer?: (value: any) => string | React.ReactNode;
labelRenderer?: (value: any) => string | React.ReactNode;
isCustomNode?: (node: any) => boolean;
};
export default function JSONTreeWrapper(props: JSONTreeProps) {
return (
<JSONTree invertTheme={false} theme={jsonTreeTheme} hideRoot {...props} />
);
}
Loading

0 comments on commit d7e4c58

Please sign in to comment.