davesnx

/* This type defines a value that 'depends' on the screen size, and changes based on `window.matchMedia` */
type dependant('value) = {
  default: 'value,
  mobile: option('value), /* 800px */
  desktop: option('value), /* 1200px */
  huge: option('value) /* 1900px */
};

type t('value) =
  | Fixed('value)

davesnx

dev:
	npx http-server -o .

davesnx

open Ppxlib
module Builder = Ast_builder.Default

type target = Native | Js

let mode = ref Native

module Effect = struct
  (* TODO: [%effect] is a little incomplete, only works with useEffect0 (not other useEffectX, neither useLayoutEffects) *)
  let extractor = Ast_pattern.(__')

davesnx

npx bsc -dparsetree wat.res
npx bsc -dparsetree wat.ml
npx bsc -format wat.ml

davesnx

Safer Tailwind with OCaml-derived languages (OCaml, Reason, ReScript or Melange)

Tailwind is optimised to work with JavaScript/TypeScript ecosystems, but other languages might have good integrations also.

This is the case for OCaml-derived languages that are used to do Frontend development. For the most part, a tighter integration might not be needed and using the Tailwind setup guide and regular classNames with strings is good enought.

let make = (~text) => {
  <h1 className="text-3xl font-bold underline">{React.string(text)}<h1>

davesnx

box(
  {
    padding: 5,
    width: "320px",
    border: "sm",
    onClick: onClick,
    onMouseLeave: onMouseLeave,
  },
  [
    stack({ gap: 2, align: "center" }, [

davesnx

const lockfileSpecs = [
  {
    checkfile: ".yarnrc.yml",
    lockfile: "yarn.lock",
    command: "yarn",
    version: "2",
    arguments: ["install", "--immutable"]
  },
  {
    checkfile: "yarn.lock",

davesnx

open ReactDOM

module MyComponent = struct
  (* Component Properties *)
  type props = {count: int}

  (* Hey, state can be any type! *)
  type state = string

  (* Initializer *)

davesnx

Configure VSCode with ocaml-lsp, esy and Reason syntax with ReScript/bs-platform.

It's a non-common setup

• If you want to target the browser and use ReScript syntax you can directly use https://github.com/rescript-lang/rescript-vscode and have similar support.
• If you do Reason these days (at the time I'm writting, arround September 2021) is commonly to target native development and you will use OCaml 4.12. In that case: follow the https://github.com/ocaml/ocaml-lsp installation.

but I find very useful, I keep liking more the Reason syntax and the ocaml-lsp experience it's much better than the rescript extension. Notably with the CodeLens support https://code.visualstudio.com/blogs/2017/02/12/code-lens-roundup with https://github.com/ocaml/ocaml-lsp.

So, If you want to keep using Reason syntax targeting the browser/node and have a good editor support, follow this:

davesnx

.PHONY: help # Set default action to be help!

help:
	@echo "List of available make commands";
	@echo "";
	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2}';
	@echo "";
	
# Add double ## comments on the same line as the dependencies and will be printed out when running help
# Don't add them if you don't want to appear on help!