https://github.com/yhdgms1/grim-jsx

Compiling JSX to produce grim static templates
https://github.com/yhdgms1/grim-jsx

babel-plugin compiler jsx jsx-templates

Last synced: 1 day ago
JSON representation

Compiling JSX to produce grim static templates

• Host: GitHub
• URL: https://github.com/yhdgms1/grim-jsx
• Owner: yhdgms1
• Created: 2022-04-17T10:00:01.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-07-25T11:33:08.000Z (5 months ago)
• Last Synced: 2024-11-04T02:22:49.665Z (about 2 months ago)
• Topics: babel-plugin, compiler, jsx, jsx-templates
• Language: TypeScript
• Homepage: https://grim.pages.dev/
• Size: 304 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Grim-JSX

Compiling JSX to produce grim static templates

## Introduction

Ever wanted to use JSX, but at very primitive level? Grim will help you to do it. Look more closer at it below.

### Static HTML

This code:

```jsx

const title = 
Hello, Grim!
;

```


Will be compiled to:

```jsx

const title = template(`
Hello, Grim!
`);

```


### More Flexible

But sometimes just the static HTML is not enough.

Here is an example of an attribute that is not a just string. This code:

```jsx

import styles from "./styles.module.css";

const title = 
Hello, {name}!
;

```


Will be compiled to:

```jsx

import styles from "./styles.module.css";

const title = template(`
Hello, ${name}!
`);

```


### Spread attributes

Setting attributes manually is cool, but what if you want some attributes to be spreaded? Not a problem.

This code:

```jsx

const title = 
Hello!
;

```


Will be compiled to:

```jsx

const _spread = (props) =>

  Object.entries(props)

    .map(([key, value]) => `${key}="${value}"`)

    .join(" ");

const title = template(`
Hello!
`);

```


### Refs

Setting attributes is not enough too. What if you want to get a reference to an element? That's where refs come in.

So this code:

```jsx

let button;

const article = (

  

    
Are cats real?

    
Not, they're not.

    

      You're serious?

    

  

);

```


Will be compiled to:

```jsx

let button;

const article = (() => {

  const tmpl = template(

    `
Are cats real?
Not, they're not.
You're serious?`

  );


  button = tmpl.firstElementChild.nextElementSibling.nextElementSibling;

  return tmpl;

})();

```

So you can use the button reference in your code.

### String Mode

But what if you just want Grim to compile JSX into strings and not to use DOM? You can use the `enableStringMode` option.

Within this mode, this code:

```jsx

const dishes = ["soup", "kimchi", "something"];

const element = (

  


    
Hello!

    
{dishes.map((person) => 
{dish}
).join("")}

  

);

```


Will be compiled to:

```jsx

const people = ["soup", "kimchi", "something"];

const element = `


Hello!

${dishes

  .map((person) => `
${dish}
`)

  .join("")}

`;

```


However, [Refs](#refs) will not work in this mode.

### JSX Fragments

What's the deal with fragments? Well, the main reason is that it may be unclear what output is going to be.

```jsx

const usingFragment = (

  <>

    {/**

     * This is a comment that will not be visible to the compiler for some reason which I will not explain here.

     * @enableStringMode

     */}

    
This is a node and it should be transformed.

    This is text and it should not.

  >

);

```


There are some problems to solve with fragments, and it will be much easier to use Array.

### Runtime Inlining

If you could not use the imports, then you could use `inlineRuntime` option. Then Grim's runtime will be inlined into you'r code.

When used with `importSource` option, the _Grim's_ runtime will be used, not one that specified in the `importSource`.