Forem: Can Rau

How to add canonical url to Remix 💿

Can Rau — Sat, 25 Dec 2021 03:41:11 +0000

This article has originally been published to canrau.com

Using `loader` data

This one is probably my fav, as it doesn't require any other function than the most probably already present loader. And because it's part of the loader it gives me full access to the already fetched content 🥰

import { homepage } from "/package.json"; // or import from some kind of "/config"
export const loader: LoaderFunction = async ({ params }) => {
  // [..]
  const { frontmatter, code } = await bundleMDX();
  // [..]
  const canonical = `${homepage}/${frontmatter?.lang}${frontmatter?.slug}`;
  return { frontmatter, code, canonical };
};

Then in my root.tsx I have the following Document component, where especially lines 12 - 14 and line 23 are relevant.

function Document({
  children,
  title,
  lang,
}: {
  children: ReactNode;
  title?: string;
  lang: string;
}) {
  // use `export const handle = { hydrate: true };` in any route to enable JS
  const includeScripts = useShouldHydrate(); // from remix-utils
  const matches = useMatches();
  const match = matches.find((match) => match.data && match.data.canonical);
  const canonical = match?.data.canonical;

  return (
    <html lang={lang} className="dark scroll-smooth">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        {title ? <title>{title}</title> : null}
        <Meta />
        {!!canonical && <link rel="canonical" href={canonical} />}
        <Links />
        <link
          rel="alternate"
          type="application/rss+xml"
          href={`${rootUrl}/${lang}/feed.xml`}
          title="Can Rau's XML Feed"
        />
        <link
          rel="alternate"
          type="application/feed+json"
          href={`${rootUrl}/${lang}/feed.json`}
          title="Can Rau's JSON Feed"
        />
      </head>
      <body className="dark:bg-gray-900">
        {children}
        <ScrollRestoration />
        {includeScripts && <Scripts />}
        {process.env.NODE_ENV === "development" && <LiveReload />}
      </body>
    </html>
  );
}

Note: More about the <link rel="alternate" /> in my other article RSS in Remix

More about useMatches in the Remix Package docs and in the Disabling Javscript docs

Remix used to provide the loader data to links, but they had to remove it for prefetching

Signals in Deno

Can Rau — Sun, 24 Oct 2021 00:33:42 +0000

Yesterday I learned a few things about signals in Deno and how to use them to gracefully terminate a (sub-)subprocess including a running Oak server

Don't panic if your signal panics

thread 'main' panicked at 'called `Result::unwrap()` on an `Err` value: Custom { kind: Other, error: "Refusing to register signal 9" }', runtime/ops/signal.rs:185:67
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

That's what I got trying to listen to SIGKILL, though thanks to this comment I learned that SIGKILL, SIGSTOP, SIGILL, SIGFPE, and SIGSEGV cannot be registered, as per Rust docs, which is of interest, because Deno runs on Rust 🚀

Fortunately there's more signals we can choose from and in my case I'm using SIGQUIT which also sounds much friendlier 🥰

Let's get to the actual code

So I changed the listening part of my Oak server to

const controller = new AbortController();
const sig = Deno.signal("SIGQUIT");
sig.then(controller.abort); // abort the controller when receiving the signal
const { signal } = controller;

export const server = async () => {
  await app.listen({ port, hostname, signal });
};

And the shutDown function which I'm using in my custom CLI to stop after a set duration, to get my break and hold my promises to my partner that I'm ready in 25m 😅

function shutDown(reason?: string | void) {
  p.kill("SIGQUIT"); // `.kill()` sends the provided signal to the subprocess
  p.close(); // closes the subprocess and frees the memory
  console.log(reason ?? red(bold("Gracefully shutting down")));
  Deno.exit(); // finally terminates the CLI with everything cleaned up
}

I wrote a much more detailed article about all this on my freshly started blog running on Deno, Oak, SSR, Go & Fly.io
Gracefully close sub-subprocess using signals in Deno 🦕

Many more articles are in the pipeline, so stay tuned 📻

Also please let me know if you have any feedback or question, here in the comments or on Twitter @CanRau

[Pulumi Custom Resource] AWS SNS E-Mail Subscription

Can Rau — Sat, 12 Sep 2020 20:19:14 +0000

Used Versions

{
  "dependencies: {
    "@pulumi/aws": "3.2.1",
    "@pulumi/pulumi": "2.9.2",
    "aws-sdk": "2.750.0",
    "netlify": "4.3.13"
  }
}

# CLI
pulumi version # => 2.7.1
# &
pulumi version # => 2.10.0

Problem

While working on some infrastructure I finally decided to add a CloudWatch billing alarm and thought e-mail would be the simplest and most effective in my current situation. That's when I had to face the following Intellisense info

The protocol to use. The possible values for this are: sqs, sms, lambda, application. (http or https are partially supported, see below) (email is an option but is unsupported, see below).

As described in Terraform's docs:

These [email & email-json] are unsupported because the endpoint needs to be authorized and does not generate an ARN until the target email address has been validated. This breaks the Terraform model and as a result are not currently supported.

which you can find under protocols supported and I stumbled upon it in this Pulumi issue because Pulumi uses Terraform's code in many cases to build their providers.

Possible Workarounds

While in the aforementioned issue Luke Hoban (CTO Pulumi) suggested polling, I decided to "just" wait a pre-set amount of time like 30 or 60 seconds.

This works pretty good, but if you, like me, have your phone on hand while running pulumi up you can confirm in a matter of seconds, then wait the rest of the time and we all know how that ends.. scrolling Twitter, or Instagram 😅

So to flex my muscles (🧠 & 👆) I decided to turn it into the suggested polling. I added some delay in-between and a maxRetry option. 🤓

While writing this article I couldn't resist playing more with my code, realizing that all of this isn't needed at all. Contrary to the quoted statement from the Terraform docs and thanks to ReturnSubscriptionArn which I've set to true. The aws-sdk will just return the ARN of the subscription, which is all we need to be able to remove the subscription later on during pulumi destroy. I tried it various times now and it doesn't really matter when I click the link in the mail to confirm the subscription. Pulumi just proceeds happily and I don't have to wait any longer than absolutely necessary 😍 🎉
I've to admit that this feature is probably newer than the quote and no-one stumbled upon this so far 🤷‍♂️

You can't destroy the stack before the subscription has been confirmed, though!

I have to say I learned a few things on the line, as probably most of the time, if not always 😁

How the actual usage looks like

// index.ts
// ... pulumi imports
import {SnsEmailSubscription} from "./sns-email-subscription";

const billingTopic = new aws.sns.Topic("topic");
const emailSubscription = new SnsEmailSubscription("subscription", {
  topic: billingTopic.arn,
  endpoint: cfg.billingAlarmEmail,
  region: cfg.region,
  waitMs: 10000,
  validationMethod: "poll", // or "sleep" or undefined to not wait
});

Complete Code

// sns-email-subscription.ts
import * as pulumi from "@pulumi/pulumi";
import {SNS} from "aws-sdk";
import isEmail from "validator/lib/isEmail";
import {
  CheckFailure,
  CheckResult,
  CreateResult,
  DiffResult,
  ReadResult,
  Resource,
  ResourceProvider,
} from "@pulumi/pulumi/dynamic";

type ValidationMethod = "sleep" | "poll" | undefined;

export type SnsInputs = {
  topic: string | pulumi.Input<string>;
  endpoint: string | pulumi.Input<string>;
  region: string | pulumi.Input<string>;
  validationMethod?: ValidationMethod | pulumi.Input<ValidationMethod>;
  waitMs?: number | pulumi.Input<number>;
  maxRetry?: number | pulumi.Input<number>;
};

type ProviderInputs = {
  topic: string;
  endpoint: string;
  region: string;
  validationMethod?: ValidationMethod;
  waitMs?: number;
  maxRetry?: number;
};

// https://gist.github.com/joepie91/2664c85a744e6bd0629c
// sometimes I'm just to lazy to think about certain things so I just search 🤷‍♂️
const sleep = (duration: number) =>
  new Promise((resolve) => setTimeout(resolve, duration));

const subscriptionValidation = async (
  id: string,
  props: ProviderInputs,
): Promise<boolean> => {
  const maxRetry = props.maxRetry ?? 5;
  const sns = new SNS({apiVersion: "2010-03-31", region: props.region});
  let confirmed = false;
  let intents = 0;
  while (intents < maxRetry && !confirmed) {
    intents++;
    await sleep(props.waitMs ?? 10000);
    const request = sns.getSubscriptionAttributes({SubscriptionArn: id});
    const response = await request.promise();
    // note that AWS is returning strings here
    if (response?.Attributes?.PendingConfirmation === "false") {
      confirmed = true;
    }
  }
  return true;
};

const snsEmailSubscriptionProvider: ResourceProvider = {
  async check(
    olds: ProviderInputs,
    news: ProviderInputs,
  ): Promise<CheckResult> {
    const failures: CheckFailure[] = [];

    if (!news.topic) {
      failures.push({
        property: "topic",
        reason: "Please provide a valid SNS Topic ARN",
      });
    }

    // ensuring it's a string to provide our own error message
    if (!isEmail(news.endpoint || "")) {
      failures.push({
        property: "endpoint",
        reason: "Please provide a valid email address",
      });
    }

    if (!news.region) {
      failures.push({
        property: "region",
        reason: "Please provide the AWS region of the corresponding SNS Topic",
      });
    }

    if (news.maxRetry !== undefined && news.maxRetry < 5) {
      failures.push({
        property: "maxRetry",
        reason: "Please provide a number greater than 4",
      });
    }

    if (news.waitMs !== undefined && news.waitMs < 1000) {
      failures.push({
        property: "waitMs",
        reason: "Please provide a number >= 1000",
      });
    }

    if (!["sleep", "poll", undefined].includes(news.validationMethod)) {
      failures.push({
        property: "validationMethod",
        reason: `Has to be one of "sleep" | "poll" | undefined`,
      });
    }

    if (failures.length > 0) {
      return {failures: failures};
    }

    return {inputs: news};
  },

  async create(props: ProviderInputs): Promise<CreateResult> {
    const sns = new SNS({apiVersion: "2010-03-31", region: props.region});
    const {topic, endpoint} = props;

    const params: SNS.SubscribeInput = {
      Protocol: "email",
      TopicArn: topic,
      Endpoint: endpoint,
      // That's the reason why it shouldn't be necessary to wait
      // as AWS provides us already the ARN if it's needed at all
      // note that the resource returns the subscription ARN as `id`
      ReturnSubscriptionArn: true,
    };

    try {
      const subscription = sns.subscribe(params);
      const response = await subscription.promise();
      const subscriptionArn = response.SubscriptionArn;

      if (!subscriptionArn) {
        throw new Error("Missing subscriptionArn");
      }

      if (props.validationMethod === "sleep") {
        await sleep(props.waitMs ?? 60 * 1000);
      } else if (props.validationMethod === "poll") {
        await subscriptionValidation(subscriptionArn, props);
      }

      return {id: subscriptionArn, outs: props};
    } catch (error) {
      console.log(error.message);
      throw error;
    }
  },

  // diff will be used to determine if the resource needs to be changed
  // it allows to decide between an update or a full replacement
  // in this case, as SNS Subscriptions can't be replaced as far as I know
  // we force it to replace if any of the properties has changed
  async diff(
    id: string,
    olds: ProviderInputs,
    news: ProviderInputs,
  ): Promise<DiffResult> {
    const replaces: string[] = [];
    let changes = false;
    let deleteBeforeReplace = false;

    if (
      olds.topic !== news.topic ||
      olds.endpoint !== news.endpoint ||
      olds.region !== news.region
    ) {
      changes = true;
      // we could decide to delete the old subscription before creating the new one
      // from my testing it doesn't seem necessary
      // so I'll let Pulumi delete it after the new one has been created
      // deleteBeforeReplace = true;

      // For simplicity I just push all properties into the replaces array
      // The replaces array is what forces Pulumi to replace instead of update
      replaces.push(...Object.keys(news));
    }

    return {changes, replaces, deleteBeforeReplace};
  },

  async delete(id: string, outs: ProviderInputs) {
    const sns = new SNS({apiVersion: "2010-03-31", region: outs.region});
    const params: SNS.UnsubscribeInput = {SubscriptionArn: id};
    const subscription = sns.unsubscribe(params);
    await subscription.promise();
  },

  // I'm actually not sure when exactly this method will be called
  // or what it's used for 🤷‍♂️ 😅
  async read(id: string, props: ProviderInputs): Promise<ReadResult> {
    const sns = new SNS({apiVersion: "2010-03-31", region: props.region});
    const params: SNS.GetSubscriptionAttributesInput = {SubscriptionArn: id};
    const subscription = sns.getSubscriptionAttributes(params);
    const response = await subscription.promise();
    return {id, props: {...props, ...response}};
  },
};

export class SnsEmailSubscription extends Resource {
  /**
   * Creates a new SNS E-Mail Subscription
   *
   * @param topic - The SNS topic ARN
   * @param endpoint - The e-mail address
   * @param region - The AWS region of the SNS topic
   * @param [validationMethod] - The method used to "validate" the successfull email confirmation, one of "sleep" | "poll" | undefined
   * @param [waitMs] - Time in ms to wait for you to confirm the subscription defaults to 1 min in "sleep" and 10sec in "poll" mode. Has to be greater than 999ms
   * @param [maxRetry=5] - How often the "poll" "validationMethod should retry
   */
  constructor(
    name: string,
    props: SnsInputs,
    opts?: pulumi.CustomResourceOptions,
  ) {
    super(snsEmailSubscriptionProvider, name, props, opts);
  }
}

You can alternatively turn it into a reusable NPM package if that's your thing. 😉

Let me know if you've got any questions.

I plan to post more Pulumi related articles soon 😍
One will be API Gateway v2 aka HTTP API related and the other one is about Pulumi, Netlify & DNS management 🚀

Sunny greetings from the jungle 🌴

ReasonML & ThemeUI in GatsbyJS via Render Props

Can Rau — Thu, 30 Apr 2020 12:19:38 +0000

For weeks I was romanticizing ReasonML but didn't find an opportunity so far to actually try it out 😭

Then I started working on the contact form of a new project I'm doing in GatsbyJS, which I started using useState hooks but then decided to use useReducer for the first time, to get a more state machine like experience, when I started to remember Reason's beautiful Pattern Matching and couldn't resist any longer 😁

The Problem

I'm new to ReasonML & Bucklescript and am using Theme UI for styling, which I think is a little more complicated to use in Reason due to the custom JSX Pragma & sx prop magic ✨
Please let me know if you know good ways to integrate/bind.

Render Props to the rescue

So I'm using Render Props to connect logic & styling.
I don't use them often, but they can be pretty useful at times. 👏
For example, I have a layout component which wraps most pages, takes in the original page props and passes certain helpers down/back if the child is a function. This way I can save on state-management/context. 😎

Before

Just for reference that's the pure JS contact form I started out with.

/** @jsx jsx */
import { jsx } from 'theme-ui'
import { useReducer } from 'react'
import isEmail from 'validator/es/lib/isEmail'
import { InputField } from './input-field'

const initialValue = {
  status: 'idle',
  errors: {},
  values: { email: '', message: '', consent: false },
}

function reducer(state, action) {
  switch (action.type) {
    case 'touched':
      return {
        ...state,
        status: 'touched',
        values: { ...state.values, ...action.values },
      }
    case 'submitting':
      return { ...state, status: 'submitting', errors: {} }
    case 'error':
      return {
        ...state,
        status: 'error',
        errors: { ...state.errors, ...action.errors },
      }
    case 'success':
      return { ...initialValue, status: 'success' }
    default:
      throw new Error()
  }
}

export const ContactForm = () => {
  const [{ status, values, errors }, dispatch] = useReducer(
    reducer,
    initialValue
  )
  const collectErrors = {}

  const handleSubmit = event => {
    event.preventDefault()

    dispatch({ type: 'submitting' })

    const cleaned = {
      email: values.email.trim(),
      message: values.message.trim(),
    }

    if (!isEmail(cleaned.email)) {
      collectErrors.email = 'Please provide your best e-mail address'
    }

    if (!cleaned.message) {
      collectErrors.message = 'Please provide a message'
    } else if (cleaned.message.length < 20) {
      collectErrors.message = 'Please be more specific'
    }

    if (!values.consent) {
      collectErrors.consent = 'You have to agree to submit'
    }

    if (Object.keys(collectErrors).length > 0) {
      dispatch({ type: 'error', errors: collectErrors })
      return
    }

    setTimeout(() => {
      dispatch({ type: 'success' })
    }, 2000)
  }

  const setEmail = (_, value) => {
    dispatch({ type: 'touched', values: { email: value } })
  }

  const setMessage = (_, value) => {
    dispatch({ type: 'touched', values: { message: value } })
  }

  const setConsent = (_, value) => {
    dispatch({ type: 'touched', values: { consent: value } })
  }

  const handleKeyDown = event => {
    if (event.metaKey && (event.key === 'Enter' || event.keyCode === 13)) {
      handleSubmit(event)
    }
  }

  return (
    <form
      action=""
      method="post"
      key="ContactForm"
      onSubmit={handleSubmit}
      onKeyDown={handleKeyDown}
    >
      <fieldset disabled={status === 'submitting'} sx={{ border: 0 }}>
        <InputField
          type="email"
          label="E-Mail-Address"
          value={values.email}
          placeholder="mail@example.com"
          onChange={setEmail}
          errorMessage={errors.email}
          required
        />

        <InputField
          type="textarea"
          label="Message"
          value={values.message}
          placeholder="Say hi 👋"
          onChange={setMessage}
          errorMessage={errors.message}
          sx={{ marginTop: '1rem' }}
          required
        />

        <InputField
          type="checkbox"
          label="I agree to my e-mail address and message being stored and used to review the request Privacy policy"
          value={values.consent}
          onChange={setConsent}
          errorMessage={errors.consent}
          disabled={status === 'submitting'}
          sx={{ marginTop: '1rem' }}
          required
        />

        <button
          type="submit"
          disabled={status === 'submitting'}
          sx={{ variant: 'buttons.primary', marginTop: '1rem' }}
        >
          Submit
        </button>
      </fieldset>
    </form>
  )
}

Initial ContactForm.re

I thought I'd "just" write the following in ReasonML and keep the rest in JS. This way I could progress my learning slowly and mostly leverage the cool pattern matching in my reducer. 😍

type status =
  | Idle
  | Touched
  | Submitting
  | Success
  | Error;

type record = {
  email: string,
  message: string,
  consent: bool,
};

module Errors = {
  type error = {
    mutable email: string,
    mutable message: string,
    mutable consent: string,
  };
};

type state = {
  status,
  errors: Errors.error,
  values: record,
};

let initialValue = {
  status: Idle,
  errors: {
    email: "",
    message: "",
    consent: "",
  },
  values: {
    email: "",
    message: "",
    consent: false,
  },
};

type action =
  | Touched(record)
  | Submitting
  | Success
  | Error(Errors.error);

let reducer = (state, action) => {
  switch (action) {
  | Touched(values) => {...state, status: Touched, values}
  | Submitting => {...state, status: Submitting, errors: initialValue.errors}
  | Error(errors) => {...state, status: Error, errors}
  | Success => {...initialValue, status: Success}
  };
};

[@react.component]
let make = (~children) => {
  let (state, dispatch) = React.useReducer(reducer, initialValue);

  children({
    "status": state.status,
    "values": state.values,
    "errors": state.errors,
    "setTouched": x => dispatch(Touched(x)),
    "setSubmitting": () => dispatch(Submitting),
    "setSuccess": () => dispatch(Success),
    "setError": x => dispatch(Error(x)),
  });
}

After getting this to work and feeling comfortable enough I decided to handle all the logic in ReasonML 🙌

open ReactEvent.Keyboard;

[@bs.module "validator/es/lib/isEmail"]
external isEmail: string => bool = "default";

[@bs.val] external setTimeout: (unit => unit, int) => unit = "setTimeout";
/* I modified it to return unit instead of float
   because of some error I got but don't remember right now
   and is only used to fake an async submit until I implement the actual logic */

type status =
  | Idle
  | Touched
  | Submitting
  | Success
  | Error;

type record = {
  email: string,
  message: string,
  consent: bool,
};

module Errors = {
  type error = {
    mutable email: string,
    mutable message: string,
    mutable consent: string,
  };
};

type state = {
  status,
  errors: Errors.error,
  values: record,
};

let initialValue = {
  status: Idle,
  errors: {
    email: "",
    message: "",
    consent: "",
  },
  values: {
    email: "",
    message: "",
    consent: false,
  },
};

type action =
  | Touched(record)
  | Submitting
  | Success
  | Error(Errors.error);

let reducer = (state, action) => {
  switch (action) {
  | Touched(values) => {...state, status: Touched, values}
  | Submitting => {...state, status: Submitting, errors: initialValue.errors}
  | Error(errors) => {...state, status: Error, errors}
  | Success => {...initialValue, status: Success}
  };
};

[@react.component]
let make = (~children) => {
  let (state, dispatch) = React.useReducer(reducer, initialValue);

  let handleSubmit = event => {
    ReactEvent.Synthetic.preventDefault(event);
    let collectErrors: Errors.error = {email: "", message: "", consent: ""};

    dispatch(Submitting);

    let email = Js.String.trim(state.values.email);
    let message = Js.String.trim(state.values.message);

    if (!isEmail(email)) {
      collectErrors.email = "Please provide your best e-mail address";
    };

    /*
    let msgLength = String.length(message);
    if (msgLength === 0) {
      collectErrors.message = "Please provide a message";
    } else if (msgLength < 20) {
      collectErrors.message = "Please be more specific";
    };
    */

    switch (String.length(message)) {
    | 0 => collectErrors.message = "Please provide a message"
    | (x) when x < 20 => collectErrors.message = "Please be more specific"
    | x => ignore(x)
    };

    if (!state.values.consent) {
      collectErrors.consent = "You have to agree to submit";
    };

    /*
    Not my best work 😂
    showing alternative syntax |> & ->
    I'm using the latter in my "real" code
    it's in this case a little more concise as it formats nicer
    a little bit confusing maybe 🤔, also I don't like this formatting actually 🤷‍♂️
    */
    if (String.length(collectErrors.email) > 0
        || collectErrors.message
        |> String.length > 0
        || collectErrors.consent->String.length > 0) {
      dispatch(Error(collectErrors));
    } else {
      /* Submit logic has yet to come as I'm focusing on UI first */
      setTimeout(() => dispatch(Success), 2000);
    };
  };

  let handleKeyDown = event =>
    if (event->metaKey && (event->key === "Enter" || event->keyCode === 13)) {
      handleSubmit(event);
    };

  let status =
    switch (state.status) {
    | Idle => "idle"
    | Touched => "touched"
    | Submitting => "submitting"
    | Success => "success"
    | Error => "error"
    };

  let props = {
    "status": status,
    "values": state.values,
    "errors": state.errors,
    "setTouched": x => dispatch(Touched(x)),
  };

  <form
    action=""
    method="post"
    key="ContactForm"
    onSubmit=handleSubmit
    onKeyDown=handleKeyDown>
    {children(props)}
  </form>;
};

let default = make;

Most stuff looks more or less okay I guess. Only thing I'm reeaally not sure but didn't manage to find another solution right away is all the collectErrors stuff.
There's maybe, better ways I just don't know yet 🙏🤷‍♂️ Once I do, maybe because of nice feedback (via Twitter) I'll come back to improve it.

Uh and I tried to pass more specific helper functions like setMail down to children but couldn't get the reducer for them working so far.

JS file just for styling purpose

/** @jsx jsx */
import { jsx } from "theme-ui";
import { InputField } from "components/input-field.js";
import { make as ContactFormLogic } from "components/ContactForm.bs.js";

export const ContactForm = () => (
  <ContactFormLogic>
    {({ status, values, errors, setTouched }) => (
      <fieldset disabled={status === "submitting"} sx={{ border: 0 }}>
        <InputField
          type="email"
          label="E-Mail-Address"
          value={values.email}
          placeholder="mail@example.com"
          onChange={(_, value) => setTouched({ ...values, email: value })}
          errorMessage={errors.email}
          required
        />

        <InputField
          type="textarea"
          label="Message"
          value={values.message}
          placeholder="Say hi 👋"
          onChange={(_, value) => setTouched({ ...values, message: value })}
          errorMessage={errors.message}
          sx={{ marginTop: "1rem" }}
          required
        />

        <InputField
          type="checkbox"
          label="I agree to my e-mail address and message being stored and used to review the request Privacy policy"
          value={values.consent}
          onChange={(_, value) => setTouched({ ...values, consent: value })}
          errorMessage={errors.consent}
          disabled={status === "submitting"}
          sx={{ marginTop: "1rem" }}
          required
        />

        <button
          type="submit"
          disabled={status === "submitting"}
          sx={{ variant: "buttons.primary", marginTop: "1rem" }}
        >
          Submit
        </button>
      </fieldset>
    )}
  </ContactFormLogic>
);

Thoughts on ReasonML

I really enjoy using it, not being able to spread props or multiple times into objects/records is still a little confusing. But that's a trade-off I'm willing to accept.

Actually I'm looking forward to a stable release of elodin by @robinweser probably in conjunction with fela to replace ThemeUI and drop the additional JS file. We'll see..

How I do ReasonML in GatsbyJS

I started with the help of gatsby-plugin-reason only to discover it's pretty outdated and bs-loader is not even recommended anymore.
Took me a while to figure this out though while trying to understand why nothing was working^^

Installing ReasonML & ReasonReact in an existing GatsbyJS project

yarn install reason-react && yarn install -D bs-plattform

By the way I'm on reason-react@0.7.0 & bs-platform@7.2.2

bsconfig.json

{
  "name": "PROJECT_NAME",
  "reason": { "react-jsx": 3 },
  "bsc-flags": ["-bs-super-errors"],
  "sources": [
    {
      "dir": "src",
      "subdirs": true
    }
  ],
  "package-specs": [
    {
      "module": "es6",
      "in-source": true
    }
  ],
  "suffix": ".bs.js",
  "namespace": true,
  "bs-dependencies": ["reason-react"],
  "ppx-flags": [],
  "refmt": 3
}

package.json

{
  "scripts": {
    "re:build": "bsb -make-world -clean-world",
    "re:start": "bsb -make-world -clean-world -w",
    "re:clean": "bsb -clean-world"
  }
}

That's actually it.

Pretty useful links

Official

By Dr. Axel Rauschmayer (@rauschma)

By others

Reason Testing Library
The BuckleScript Cookbook — by glennsl
Gist explaingin pipe-first (->) vs pipe-last (|>) — by Heechul Ryu (@ryuheechul) found in Reason Discord
Data-first and data-last: a comparison (mentioned in the former Gist) — by Javier Chávarri (@javierwchavarri)
Best convention/style for pattern matching topic in Reason's Discord
ReasonML for production React Apps? 🤔 (Part 1) — by Seif Ghezala (@seif_ghezala)
Higher Order Function signature in Reason Discord
Exploring Bucklescript’s Interop with JavaScript (in Reason) Somewhat old but still valuable — by David Gomes (@Munchor)
Learning ReasonReact Step by Step Part: 4 — by rockyourcode.com
ReasonReact + useReducer hooks — Gist by Patrick Stapfer (@ryyppy)
reason-hooks-lib as inspiration — by Victor Wang (@HelloVictorWang)
Use ReasonMLs Variant & Record types with ReasonReact's useReducer hook to Manage State — by Thomas Greco (@tgrecojs) on egghead.io
ReasonML with React Hooks Tutorial — Building a Pomodoro Timer — by Ian Wilson (@iwilsonq)
ReasonML PPX — by Grégoire Vda (@gregoirevda)
Vanilla JSX in Reason in Reason Discord
TDD A REASONML FUNCTION — by Jake Trent (@jaketrent)
Next.js, but in ReasonML and Bucklescript! if you're using NextJS — by Murphy Randle
re-tailwind — by Hieu Pham (@phthhieu)

📸 Cover image by Victor Garcia on Unsplash

Gatsby Transformer Leasot

Can Rau — Fri, 31 Jan 2020 01:06:03 +0000

I finally published gatsby-transformer-leasot 🎉 I started working on this half a year ago I believe, yet couldn't manage to bring it to a state I'd feel comfortable releasing. In the last couple of days I could spare some time improving the API, convert it to Typescript 🚀 and improve the docs.

So what does it do?

It extracts all comments in provided source files like the following

// TODO: find a more concise way

and makes them available to you via GrapqhQL as accessible object containing the comment along useful information.

{
  "todo": {
    "ref": "",
    "line": 1,
    "value": "find a more concise way",
    "file": {
      "relativePath": "gatsby-config.js"
    }
  }
}

How to install it

yarn add -D gatsby-transformer-leasot
# or
npm i -D gatsby-transformer-leasot

It requires: gatsby-source-filesystem, this way you can use a separate instance to define which files to source only used by gatsby-transformer-leasot.

How to configure it

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: __dirname,
        name: `leasot`,
        ignore: [
          /\.*.*\/(node_modules|\.cache|public|static|dist|\.yarn)\/./,
          /\.*.\.(log|jpe?g|png|gif|ico|json|map|gz|pdf)/,
        ],
      },
    },
    `gatsby-transformer-leasot`,
  ],
}

That's the minimum required setup using the defaults.

How to query

allLeasot(
  sort: { fields: [todo___modifiedTime], order: DESC }
) {
  group(field: todo___tag) {
    fieldValue
    totalCount
    nodes {
      id
      todo {
        tag
        line
        ref
        value
        modifiedTime(formatString: "YYYY-MM-DD H:mm") # More about modifiedTime below
        file {
          relativePath
        }
      }
    }
  }
}

Note: The name allLeasot depends on the provided sourceInstanceName in the configs. So when you change it you have to change the name option of gatsby-source-filesystem accordingly, lets say todo then you query for allTodo or todo if you just want a single one.

All config options

name	type	default	description
sourceInstanceName	`string`	'leasot'	Has to match the `name` prop of `gatsby-source-filesystem`.
customTags	`array`	[]	Other tags to look for (besides todos and fixmes). Tags are case-insensitive and are strict matching, i.e PROD tag will match PROD but not PRODUCTS. More in Leasot's Docs
mode	`string`	'text'	Supports one of: `text`, `mdx`, `html`.
truncateLinks	`int`\	`object`	{length: 32,style: 'smart'}
associateParser	`object`	{}	Associate the filetypes with parsers. This allows adding support for new filetypes. More in Leasot's Docs
customParsers	`object`	{}	Extend the parsers by parserName, for example override the defaultParser or add a new parser. Leasot's Docs

All by default supported languages (file extensions) can be found in Leasot's Readme

More examples

// FIXME(Reference): improve example
// TODO: you can add a reference like this as well /Reference
// TODO: example without reference

See the full supported comment format by Leasot in their readme.

Sadly

Even though the node in GraphQL also provides modifiedTime of the file it's currently only locally useful as file times will all be the same on CI. I don't have an easy fix for that so far.

Alternative todo lists

I've installed & tried VSCode extensions like TODO Highlight and some others yet never really remember to let them generate the list to see my notes. Global search could work, too. Yet I find this automatic integration much more pleasing. And making it public kinda helps at least trying to get back to those notes so they won't stick around forever 😅. Let's see how that goes 🤓.

The near future

This website is not only meant as my / GaiAma's dev knowledge base, but as a playground and place to try things out before implementing on GaiAma.org 😉

My next plans are improving the donation experience on GaiAma.org, then, or maybe along that, improving the various open source projects and probably releasing more stuff, not just to share them with others but with myself, too. 😁

Some time in the near future I think about merging this repository with GaiAma/gaiama.org, not exactly sure about that though. 🤔 One benefit would be that the roadmap could then easily show GaiAma.org notes as well, without having to source it from GitHub. Just thinking out loud.

By the way

truncateLinks uses remark-truncate-links which I open sourced separately. I use it for all MDX content as well. It'll truncate all links not manually named. Go check it out 🤩

Links

Find it on GitHub & NPM

This post has been originally published on coding4.gaiama.org/en/gatsby-transformer-leasot