Checkout with Deno - Alpha

_.md

VTEX Checkout with Deno

No polyfill. No browserlist.

This is a alpha version that I'm not using any more...

Now I'm using ESBuild and PostCSS

1. First create a new app using checkout-ui-settings scaffold

  $ vtex init

2. Inside the directory app-name > checkout-ui-custom create files:

• deno.json
• dev.ts

3. Start the build running:

$ deno task start

4. Now link the app

5. Done!

deno.json

{
    "tasks": {
        "start": "deno run -A --watch=checkout6-custom.scss,checkout6-custom.ts,layout/,helpers/,components/,styles/ dev.ts"
    },
    "imports": {},
    "nodeModulesDir": true
}

dev.ts

/// <reference lib="deno.ns" />

import { bundle } from "https://deno.land/x/buckets@v0.7.0/mod.ts";
import sass from "https://deno.land/x/denosass@1.0.6/mod.ts";

/*########*
 *#  JS  #*
 *########*/
const js = await bundle("./checkout6-custom.ts", "deno.json");
Deno.writeTextFileSync("./checkout6-custom.js", js);

/*#########*
 *#  CSS  #*
 *#########*/
const css = sass(Deno.readTextFileSync("./checkout6-custom.scss"), {
  load_paths: [
    "./styles/abstract",
    "./styles/components",
    "./styles/layout",
    "./styles/tools",
    "./styles/vendors",
  ],
});
Deno.writeTextFileSync(
  "./checkout6-custom.css",
  css.to_string("expanded") as string,
);