{"library":"raw.macro","title":"raw.macro","description":"raw.macro is a JavaScript utility for embedding file contents directly into your application bundle at build time. Currently at version 0.7.0, it functions similarly to webpack's `raw-loader` but leverages `babel-plugin-macros` or an SWC plugin for broader compatibility across different build setups, including Create React App and Next.js. The package sees intermittent, feature-driven releases, often incorporating support for newer tooling versions (like Next.js 13 and `swc_core`). Its primary differentiator is the compile-time string literal replacement, supporting both static and dynamically constructed paths (with specific limitations on complexity and bundle size impact). It ships with TypeScript type definitions, enabling type-safe usage in TypeScript projects.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install raw.macro"],"cli":null},"imports":["import raw from 'raw.macro';","import type { RawMacroOptions } from 'raw.macro';","// next.config.js\nmodule.exports = {\n  experimental: {\n    swcPlugins: [\n      [\n        \"raw.macro/swc\",\n        {\n          rootDir: __dirname\n        }\n      ]\n    ]\n  }\n};"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import raw from 'raw.macro';\nimport { createServer } from 'http';\n\n// Load a static markdown file at build time\nconst markdownContent = raw('./README.md');\n\n// Example of dynamic path import (with caveats mentioned in warnings)\nfunction loadArticle(locale) {\n  // In a real app, this would be invoked inside a component or function\n  // and raw.macro would have pre-loaded all matching files during build.\n  // Note: this approach can significantly increase bundle size.\n  return raw(`../content/${locale}.md`);\n}\n\n// Imagine a content directory at the root, e.g., 'content/en.md'\n// For demonstration, let's simulate some content for the dynamic path.\nconst englishArticle = raw(`../content/en.md`); // This would typically be dynamic but is static here for quickstart context.\n\nconsole.log('Markdown loaded at build time (first 100 chars):', markdownContent.substring(0, 100));\nconsole.log('English article loaded at build time (first 100 chars):', englishArticle.substring(0, 100));\n\nconst server = createServer((req, res) => {\n  if (req.url === '/') {\n    res.writeHead(200, { 'Content-Type': 'text/plain' });\n    res.end('Server is running. Check console for raw.macro output.');\n  } else {\n    res.writeHead(404);\n    res.end('Not Found');\n  }\n});\n\nserver.listen(3000, () => {\n  console.log('Server listening on http://localhost:3000');\n});","lang":"typescript","description":"This example demonstrates how to load static file content using `raw.macro` and showcases a conceptual dynamic path import pattern at build time. It also shows basic server setup.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}