Ifiok Jr. ifiokjr

First node library in rust

Today I'm tackling the challenge of creating my first node library in rust. There's a recent trend for JS libraries to use rust for building performance sensitive developer tooling.

The following libraries are implemented in rust.

swc - build tools for JavaScript, TypeScript and CSS (kinda).
next.js - recently adopted rust (built on swc for building and minification).
parcel - They recently released a rust version of their bundler
The author is also working on parcel-css.

Motivation

Links can be too long for discord. I'll put them in this markdown document to make sharing easier.

Clearable social editor

Documentation

I find writing documentation difficult. Inline docs while I'm coding is fine, but sitting down and actually writing something that people can use to understand the codebase is very taxing for me.

These are notes to help guide me and hopefully make the process less taxing. Some parts will be copied and pasted directly in the remirror documentation site and other parts are observations and ideas.

Goals

I know what good documentation makes me feel like. It makes me feel safe and loved. It makes me trust the library I'm learning. Sometimes if the documentation is good enough it get's me excited. I may have come to the project to solve a specific problem but the docs are so good that now I want to share all about it.

API Enhancements

I've run into a fundamental problem with the way properties are currently setup. Each property maps directly to the property in the extension. This is great for primitives but not so great for handler functions. Ideally you should be able to register a handler method anywhere.

const onChange = useCallback(() => doSomething(), []);
useExtension(MentionExtension, { onChange })

Unfortunately I can't add another onChange handler anywhere else. Every time that onChange method changes it will overwrite the property on the extension.

I've recently learned how to typecheck your JS project using JS docs and typescript. It's pretty sweet actually.

Firstly update the tsconfig file at the root of the project to include the following.

If you're familiar with typescript then this should be relatively straightforward.

{
  "compilerOptions": {
+ "allowJs": true,

	import React from 'react'
	import useErrorBoundary from 'use-error-boundary'
	import styled from 'styled-components'

	import { Remirror, useRemirror, useRemirrorContext } from '@remirror/react'
	import { YjsExtension } from '@remirror/extension-yjs'
	import { IndexeddbPersistence } from 'y-indexeddb'
	import { WebrtcProvider } from 'y-webrtc'
	import { WebsocketProvider } from 'y-websocket'
	import { Doc } from 'yjs'

	/**
	* @packageDocumentation
	*
	* Provides the main method used to convert markdown to html.
	*/

	import { isString } from '@remirror/core';

	/**
	* Converts the provided markdown to HTML.

	/**
	* goto a page with a longer timeout when not on CI.
	*/
	export async function goto(url: string) {
	const output = await Promise.race([
	page.goto(url).then((value) => [value]),
	page.waitForTimeout(5000).then(() => console.log('timeout reached', url)),
	]);

	if (output) {

	/**
	* Translate the getter function into the variable name.
	*
	* This is a macro and needs `babel-plugin-macro` to work.
	*/
	export function getTheme(getter: (theme: DeepString<Remirror.Theme>) => string): string;

	import * as React from 'react';

	/**
	* React.Ref uses the readonly type `React.RefObject` instead of
	* `React.MutableRefObject`, We pretty much always assume ref objects are
	* mutable (at least when we create them), so this type is a workaround so some
	* of the weird mechanics of using refs with TS.
	*/
	export type AssignableRef<ValueType> =
	\| {