Grandma's Own JSX

1.0.0 verified Fri May 01 auth: no javascript abandoned

A novelty Babel plugin transpiler that replaces standard JSX syntax with emoji-based declarations, meant as a joke or for obfuscation. Version 1.0.0, single release with no active development. Key differentiator: deliberately unreadable, using emoji to define components and attributes, targeting developers who want to confuse colleagues. Not recommended for production.

Common errors

error SyntaxError: Unexpected token ↓

cause Emoji not recognized by Babel parser without plugin

fix

Add 'grandmas-own-jsx' to .babelrc plugins array.

error Module not found: Can't resolve 'grandmas-own-jsx' ↓

cause Package not installed or Babel cannot locate the plugin

fix

Run npm install --save grandmas-own-jsx and ensure node_modules is present.

error Error: Plugin/preset files are not allowed to export objects, only functions. ↓

cause Using grandmas-own-jsx with @babel/core v7+ without proper module export

fix

Use "module:grandmas-own-jsx" in .babelrc plugins array instead of bare name.

Warnings

breaking Standard JSX syntax is replaced; mixing emoji and normal JSX in same file undefined behavior. ↓

fix Do not use normal JSX in files using Grandma's Own JSX.

deprecated Plugin is abandoned; no updates for Babel 7.x compatibility issues may occur. ↓

fix Do not use in new projects; consider alternatives for obfuscation.

gotcha Emoji attributes like className must be string literals; variables require emoji reference with same name. ↓

fix Declare variable emoji mapping explicitly in recipe comments.

gotcha The plugin expects the emoji comment block at top of file; failing to include 👵📚 results in parse errors. ↓

fix Always start files with //👵📚 and recipe comments.

Install

npm install grandmas-own-jsx

yarn add grandmas-own-jsx

pnpm add grandmas-own-jsx

Imports

default

wrong

No import is needed for grandmas-own-jsx; it's a Babel plugin, not a runtime package

correct

import React from 'react'

The plugin is added to .babelrc, not imported in code.

.babelrc plugin

wrong

{"plugins": ["module:grandmas-own-jsx"]} is sometimes needed for older Babel versions

correct

{"plugins": ["grandmas-own-jsx"]}

Use 'module:grandmas-own-jsx' if Babel gives plugin resolution errors.

emoji syntax

wrong

Using emoji directly in JSX without comments or outside the recipe block

correct

//👵📚
// 🥰 div className="foo"

Emoji recipes must be in comments after the 👵📚 header.

Quickstart

Shows how to install, configure as Babel plugin, and write a basic component with emoji syntax.

npm install --save grandmas-own-jsx

// .babelrc
{
  "plugins": ["grandmas-own-jsx"]
}

// index.js
//👵📚
// 🥰 div className="container"
// 🥳 h1
// 💖 _ "Hello Grandma!"

import React from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => "👵";/*
  🥰
    🥳
      💖
*/

ReactDOM.render(<MyComponent />, document.getElementById('root'));