{"id":25651,"library":"grandmas-own-jsx","title":"Grandma's Own JSX","description":"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.","status":"abandoned","version":"1.0.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install grandmas-own-jsx","lang":"bash","label":"npm"},{"cmd":"yarn add grandmas-own-jsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add grandmas-own-jsx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required to run the Babel plugin","package":"@babel/core","optional":false}],"imports":[{"note":"The plugin is added to .babelrc, not imported in code.","wrong":"No import is needed for grandmas-own-jsx; it's a Babel plugin, not a runtime package","symbol":"default","correct":"import React from 'react'"},{"note":"Use 'module:grandmas-own-jsx' if Babel gives plugin resolution errors.","wrong":"{\"plugins\": [\"module:grandmas-own-jsx\"]} is sometimes needed for older Babel versions","symbol":".babelrc plugin","correct":"{\"plugins\": [\"grandmas-own-jsx\"]}"},{"note":"Emoji recipes must be in comments after the 👵📚 header.","wrong":"Using emoji directly in JSX without comments or outside the recipe block","symbol":"emoji syntax","correct":"//👵📚\n// 🥰 div className=\"foo\""}],"quickstart":{"code":"npm install --save grandmas-own-jsx\n\n// .babelrc\n{\n  \"plugins\": [\"grandmas-own-jsx\"]\n}\n\n// index.js\n//👵📚\n// 🥰 div className=\"container\"\n// 🥳 h1\n// 💖 _ \"Hello Grandma!\"\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst MyComponent = () => \"👵\";/*\n  🥰\n    🥳\n      💖\n*/\n\nReactDOM.render(<MyComponent />, document.getElementById('root'));\n","lang":"javascript","description":"Shows how to install, configure as Babel plugin, and write a basic component with emoji syntax."},"warnings":[{"fix":"Do not use normal JSX in files using Grandma's Own JSX.","message":"Standard JSX syntax is replaced; mixing emoji and normal JSX in same file undefined behavior.","severity":"breaking","affected_versions":"ALL"},{"fix":"Do not use in new projects; consider alternatives for obfuscation.","message":"Plugin is abandoned; no updates for Babel 7.x compatibility issues may occur.","severity":"deprecated","affected_versions":"ALL"},{"fix":"Declare variable emoji mapping explicitly in recipe comments.","message":"Emoji attributes like className must be string literals; variables require emoji reference with same name.","severity":"gotcha","affected_versions":"ALL"},{"fix":"Always start files with //👵📚 and recipe comments.","message":"The plugin expects the emoji comment block at top of file; failing to include 👵📚 results in parse errors.","severity":"gotcha","affected_versions":"ALL"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Add 'grandmas-own-jsx' to .babelrc plugins array.","cause":"Emoji not recognized by Babel parser without plugin","error":"SyntaxError: Unexpected token"},{"fix":"Run npm install --save grandmas-own-jsx and ensure node_modules is present.","cause":"Package not installed or Babel cannot locate the plugin","error":"Module not found: Can't resolve 'grandmas-own-jsx'"},{"fix":"Use \"module:grandmas-own-jsx\" in .babelrc plugins array instead of bare name.","cause":"Using grandmas-own-jsx with @babel/core v7+ without proper module export","error":"Error: Plugin/preset files are not allowed to export objects, only functions."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}