DEV Community: Rafael Mejia

How to Typescript to JSON with Butlermock

Rafael Mejia — Sat, 19 Aug 2023 20:40:29 +0000

Butlermock

It's a tool for building mocks from typescript's types/interfaces into object with actual data provided by Fakerjs

Web usage

Just go to https://butlermock.deno.dev/ and in the left panel paste your interfaces or types.

Wait until the monaco editor shows up and paste your interfaces to later clicking the play button and the mock shows up almost immediately.

The "play" button mocks up, "clipboard" copies the mock created and the "X" button is for cleaning the view

API documentation

Easy peasy


fetch(new URL("/api/mock", 'https://butlermock.deno.dev').href, {
    method: "POST",
    headers: {
      "content-type": "application/json",
    },
    body: JSON.stringify({
      value: `interface Test {
        Hello: "World!";
        }`,
      valueForAny: "null", // any parseable json value, values: "null" | "\"Whatever the text you want\"" | "{}" | "0" | "1" | ... | "9"
      mustReturn: "", // empty or the top-level name of the interfaces that you provided
      quantity: 1, // if is greater than 1, the api response will be an array of the interfaces provided
    }),
  })
  .then(res => res.json()).then(console.log); // should log:
  //{
  // "Test": {
  //    "Hello": "World!"
  //  }
  //}

Always remember to format your interfaces or types correctly, if you forget to add ";" it may result in bad parsing

new interface2mock(`interface Test {
  Hello: "World!" // -> No closing semicolon ( ; )
  supa: string;
}`).buildMock()

/*
{
  "Test": {
    "Hello": null
  }
}
*/

Recommedations when using the API

If you are going to consume the API I suggest that you use fetch() instead of your own HTTPS calling implementation, to avoid sending credentials which I don't store, but security reasons try to use it in the way I suggest, just for privacy reasons. REPEATING, I DO NOT STORE ANY DATA. :).

Limitations

This section is for known limitations that Butlermocks has, but in the future might be able to recognize and mock:

type	casting	description
Array	Array<string \	boolean \

Status

[x] Interfaces

interface NonMockeableInterface {} // ❌ empty interface

interface MockeableInterface {
  somethingToMock: any;
} // ✅ Mockeable

export interface AnotherMockeableInterface {
  anotherThingToMock: any;
} // ✅ Mockeable, 'export' is ignored

[x] Interfaces with nested interfaces/types

type mockeableType = {
  name: string;
} // ✅ Mockeable

interface MockeableInterface {
  somethingToMock: any;
  nestedInterface: AnotherMockeableInterface;
  extraNestedInterface: AnotherMockeableInterface[];
} // ✅ Mockeable

export interface AnotherMockeableInterface {
  anotherThingToMock: any;
} // ✅ Mockeable, 'export' is ignored

[ ] Interfaces that extends from other interfaces/types

// Not mockeable yet
interface That { ... }

interface This extends That {} // ❌

[ ] Generic Interfaces

// Not mockeable yet
interface This<T> {
  here: T;
} // ❌

[ ] Generic Interfaces that extends from other interfaces/types

// Not mockeable yet
interface Evnt<T> {
  name: T;
}

interface IPropertiesToAdd<T> extends Evnt<T> {
  on(): void;
  off(): void;
} // ❌

[x] Primitive Type

// Not mockeable yet
type justString = string; // ✅ Mockeable

[x] Type object

type justString = {
  yes: 'you can';
}; // ✅ Mockeable

[x] Type with nested interfaces/types


type mockeableType = {
  nestedObject: MockeableInterface;
} // ✅ Mockeable

interface MockeableInterface {
  somethingToMock: any;
} // ✅ Mockeable

[ ] Generic Type

// Not mockeable yet
type IPropertiesToAdd<T extends {}> = T & {
    on(): void
    off(): void
}; // ❌

Integración de una aplicación de Angular con Fresh Framework: guía fácil

Rafael Mejia — Sun, 30 Apr 2023 05:35:51 +0000

Si está aquí, tal vez esté donde comencé, para este tutorial asumo que ya tiene Deno y Angular instalados, este proceso también se aplica a Ionic.

Comencemos con esta integración. Solo necesita crear un nuevo proyecto con Deno. No importa si ya tiene un proyecto creado, pero tenga en cuenta que necesitaremos agregar varios archivos a la carpeta de activos más adelante. Verás.

Inicie el proyecto con Fresh usando Deno:

deno run -A -r https://fresh.deno.dev fresh-angular && cd fresh-angular

Complete las preguntas iniciales para configurar su proyecto, ahora, comience un nuevo proyecto con Angular o Ionic (en mi caso usaré Ionic 7 con Angular 15):

ionic start my-project tabs --type=angular --no-git

Ahora su estructura de archivos puede verse así:

Integración

Ahora debemos hacer algunos cambios, dentro de la carpeta routes, crear una carpeta llamada app, y crear un archivo llamado [...app].ts y pegar este código dentro del archivo recién creado:

import { Handlers } from '$fresh/server.ts'

export const handler: Handlers = {
    async GET() {

        const filePath = new URL('file://'+Deno.cwd()+'/static/index.html').pathname;
        let fileSize;
        try {
          fileSize = (await Deno.stat(filePath)).size;
        } catch (e) {
          return new Response(null, { status: 500 });
        }
        const body = (await Deno.open(filePath)).readable;
        const resp = new Response(body);
        resp.headers.set("content-length", fileSize.toString());
        resp.headers.set("content-type", "text/html; charset=utf-8");
        return resp;

    }
}

¡No empieces el proyecto todavía!

Abra su terminal VSCode y escriba este comando en él: cd App && ng build --configuration=production

Dentro de su carpeta /App ahora debe ver una carpeta llamada www, ahora vamos a crear un ayudante para mover esa carpeta a nuestra carpeta /static.

En su directorio raíz, cree un archivo llamado sync.ts y pegue el siguiente código:

let htmlContent = await Deno.readTextFile('./App/www/index.html');
const entries: string[] = [];

console.log('Checking directories...')
for await (const dirEntry of Deno.readDir('./App/www')) {
   if(dirEntry.name.endsWith('.js')) entries.push(`<script src="${dirEntry.name}" type="module"></script>`);
}

htmlContent = htmlContent.replace(/<script src=".+" type="module"><\/script>/gm, entries.toString()).replace('<base href="/">', '<base href="/app">');

const sourceDir = "./App/www";
const destinationDir = "./static";

console.log('Removing old files...');
for await (const dirEntry of Deno.readDir('./static')) {
    if(dirEntry.name !== 'save') Deno.removeSync('./static/' + dirEntry.name, { recursive: true });
 }

console.log('Updating files...');
for await (const dirEntry of Deno.readDir(sourceDir)) {
  const sourcePath = `${sourceDir}/${dirEntry.name}`;
  const destinationPath = `${destinationDir}/${dirEntry.name}`;

  await Deno.rename(sourcePath, destinationPath);
}

console.log('Rewriting index.html...')
await Deno.writeTextFile('./static/index.html', htmlContent);

Antes de finalizar, debes ir a tu deno.json y agregar este script dentro del objeto task:

"sync": "cd App && ng build --configuration=production && cd .. && deno run -A sync.ts"

Finalmente, si llega aquí, simplemente ejecute en su terminal el proyecto raíz deno task start y siga el enlace que se muestra en el terminal, generalmente http://localhost:8000 o escriba manualmente en la barra de búsqueda de su navegador http://localhost:8000/app para ver cómo funciona su aplicación Angular dentro de su Fresh Project.

¡Espero que esta publicación te ayude!

Integrating Your Angular App with the Fresh Framework: Easy guide

Rafael Mejia — Sun, 30 Apr 2023 05:21:50 +0000

If you are here, maybe you are where I started, for this tutorial I am assuming that you already have Deno and Angular installed, this process does apply for Ionic too.

Let's get started with this integration. You just need to create a fresh project with Deno. It doesn't matter if you already have a project created, but please note that we will need to add several files to the assets folder later on. You'll see.

Start the project with Fresh using Deno:

deno run -A -r https://fresh.deno.dev fresh-angular && cd fresh-angular

Fill up the initial questions to setup your project, now, start a new project with Angular or Ionic (In my case I will use Ionic 7 with Angular 15):

ionic start my-project tabs --type=angular --no-git

Now your file structure may look like this:

Integration

Now we must make a few changes, inside the folder routes, create a folder called app, and create a file called [...app].ts and paste this code within the file recently created:

import { Handlers } from '$fresh/server.ts'

export const handler: Handlers = {
    async GET() {

        const filePath = new URL('file://'+Deno.cwd()+'/static/index.html').pathname;
        let fileSize;
        try {
          fileSize = (await Deno.stat(filePath)).size;
        } catch (e) {
          return new Response(null, { status: 500 });
        }
        const body = (await Deno.open(filePath)).readable;
        const resp = new Response(body);
        resp.headers.set("content-length", fileSize.toString());
        resp.headers.set("content-type", "text/html; charset=utf-8");
        return resp;

    }
}

Don't start the project yet!

Open your VSCode terminal and write this command into it: cd App && ng build --configuration=production

Inside your /App folder you must now see a folder called www, now let's create a helper to move that folder into our /static folder.

On your root directory create a file called sync.ts and paste the following code:

let htmlContent = await Deno.readTextFile('./App/www/index.html');
const entries: string[] = [];

console.log('Checking directories...')
for await (const dirEntry of Deno.readDir('./App/www')) {
   if(dirEntry.name.endsWith('.js')) entries.push(`<script src="${dirEntry.name}" type="module"></script>`);
}

htmlContent = htmlContent.replace(/<script src=".+" type="module"><\/script>/gm, entries.toString()).replace('<base href="/">', '<base href="/app">');

const sourceDir = "./App/www";
const destinationDir = "./static";

console.log('Removing old files...');
for await (const dirEntry of Deno.readDir('./static')) {
    if(dirEntry.name !== 'save') Deno.removeSync('./static/' + dirEntry.name, { recursive: true });
 }

console.log('Updating files...');
for await (const dirEntry of Deno.readDir(sourceDir)) {
  const sourcePath = `${sourceDir}/${dirEntry.name}`;
  const destinationPath = `${destinationDir}/${dirEntry.name}`;

  await Deno.rename(sourcePath, destinationPath);
}

console.log('Rewriting index.html...')
await Deno.writeTextFile('./static/index.html', htmlContent);

Before ending, you must go to your deno.json and add this script inside the task object:

"sync": "cd App && ng build --configuration=production && cd .. && deno run -A sync.ts"

Finally, if you reach here, just run on your terminal in the root project deno task start and follow the link showed on the terminal usually http://localhost:8000 or manually write on the searchbar of your browser http://localhost:8000/app to watch your Angular App working inside your Fresh Project.

Hope this post helps you!