Code Monkey home page Code Monkey logo

ts-transformer-preval's Introduction

ts-transformer-preval

NOT STABLE, consider that when using it

Pre-evaluate code at build-time.

Inspired by babel-plugin-preval & forced by the behaviour of next.js (in detail the getInitialProps function on client side).

This small transformer came to live.

The problem

You need to do some dynamic stuff, but don't want to do it at runtime. Or maybe you want to do stuff like read the filesystem to get a list of files and you can't do that in the browser.

babel-plugin-preval#the-problem

The solution

This allows you to specify some code that gets transpiled, runs in Node and whatever your run function returns in there will be swapped. For example:

import { preval } from 'ts-transformer-preval-macro';

const data = preval`async function run() {
   return 5+5; 
}`;

becomes

const data = 10;

Something more fancy?

import IContentBlock from '../interfaces/IContentBlock';
import { preval } from 'ts-transformer-preval-macro';

const content: IContentBlock[] = preval`
import {FetchData, getContentPiece} from '../services/DataService';
import IContentBlock from '../interfaces/IContentBlock';

async function run() {
    const fetcher = new FetchtData();

    const contentBlocks: IContentBlock[] = getContentPiece<IContentBlock>(
        await fetcher.getContentBlocks({
            'fields.identifier[match]': 'article.'
        })
    );

    return contentBlocks;
}`;

becomes

import IContentBlock from '../interfaces/IContentBlock';

const content: IContentBlock[] = [
  {
    identifier: 'article.typescript.transformer.preval',
    title: 'How to write a typescript transformer',
    content: '...',
    slug: 'howto-write-a-typescript-transformer'
  },
  {
    identifier: 'article.typescript.transformer.101',
    title: 'Typescript transformer 101',
    content: '...',
    slug: 'typescript-transformer-101'
  }
];

Install

npm i ts-transformer-preval-macro

Configuration

mode

type: string
default: development

Switch basic settings between production and development.

cacheActivated

type: boolean
default: false

If activated results of pre-evaluation will be cached until code is changed. production and development mode have separated caches.

debug

type: boolean
default: false

If activated evaluated code won't be deleted so you can run & inspect it manually.

Usage

With loaders

With ts-loader

{
    loader: 'ts-loader',
    options: {
        getCustomTransformers: () => {
            return {
                before: [
                    prevalTransformer({
                        cacheActivated: true,
                        mode: isProduction ? 'prod' : 'dev',
                        debug: false,
                    })(),
                ],
            };
        }
    }
}

With atl

With tsc

Contribute

  1. Don´t harvest any data ¯\_(ツ)_/¯
  2. Git flow

Inspired by

kentcdodds awesome babel-plugin-preval.

LICENSE

MIT

ts-transformer-preval's People

Contributors

ahoendgen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

ts-transformer-preval's Issues

Add caching system

User story

As a developer i want to be able to quickly build my project in order to not waste my precious time.

Description

Due to the way of how this is implemented the whole solution is prone to be a performance issue.
To reduce this a bit it would make sense to add a way to cache the compiled code and / or the result of the executed inlined code.

Acceptance criteria

  • Evaluation result can be cached
  • Compiled code can be cached
  • It´s configurable via the options passed to the transformer

What do you mean by unstable?

Hi!

I have been searching for a TS preval for a while now, and I finally found this one! This is exactly what I wanted, but why do you say it is unstable?

Does it not have some feature you would like? Does it work reasonably well?

I will try it out when I get a change though, thanks :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.