feat: url

packages/url/README.md

@@ -0,0 +1,120 @@
+# @farmfe/plugin-url
+
+🍣 A farm plugin which imports files as data-URIs or ES Modules.
+
+## Requirements
+
+This plugin requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and farm v1.0.0+.
+
+## Install
+
+Using npm:
+
+```console
+npm install @farmfe/plugin-url --save-dev
+```
+
+## Usage
+
+Create a `farm.config.js` [configuration file](https://www.farmfe.org/docs/config/configuring-farm) and import the plugin:
+
+```typescript
+import { defineConfig } from '@farmfe/core';
+
+export default defineConfig({
+  plugins: [
+    [
+      '@farmfe/plugin-url',
+      {},
+    ],
+  ],
+});
+```
+
+With an accompanying file `src/index.js`, the local `image.svg` file would now be importable as seen below:
+
+```js
+// src/index.js
+import svg from './image.svg';
+console.log(`svg contents: ${svg}`);
+```
+
+## Options
+
+### `exclude`
+
+Type: `String` | `Array[...String]`<br>
+Default: `null`
+
+A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patterns, which specifies the files in the build the plugin should _ignore_. By default no files are ignored.
+
+### `include`
+
+Type: `String` | `Array[...String]`<br>
+Default: `[".*\.svg$",".*\.png$",".*\.jp(e)?g$", ".*\.gif$", ".*\.webp$",]`
+
+A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patterns, which specifies the files in the build the plugin should operate on. By default .svg, .png, .jpg, .jpeg, .gif and .webp files are targeted.
+
+### `limit`
+
+Type: `Number`<br>
+Default: `14336` (14kb)
+
+The file size limit for inline files. If a file exceeds this limit, it will be copied to the destination folder and the hashed filename will be provided instead. If `limit` is set to `0` all files will be copied.
+
+### `publicPath`
+
+Type: `String`<br>
+Default: (empty string)
+
+A string which will be added in front of filenames when they are not inlined but are copied.
+
+### `emitFiles`
+
+Type: `Boolean`<br>
+Default: `true`
+
+If `false`, will prevent files being emitted by this plugin. This is useful for when you are using Rollup to emit both a client-side and server-side bundle.
+
+### `fileName`
+
+Type: `String`<br>
+Default: `'[hash][extname]'`
+
+If `emitFiles` is `true`, this option can be used to rename the emitted files. It accepts the following string replacements:
+
+- `[hash]` - The hash value of the file's contents
+- `[name]` - The name of the imported file (without its file extension)
+- `[extname]` - The extension of the imported file (including the leading `.`)
+- `[dirname]` - The parent directory name of the imported file (including trailing `/`)
+
+### sourceDir
+
+Type: `String`<br>
+Default: (empty string)
+
+When using the `[dirname]` replacement in `fileName`, use this directory as the source directory from which to create the file path rather than the parent directory of the imported file. For example:
+
+_src/path/to/file.js_
+
+```js
+import png from './image.png';
+```
+
+_rollup.config.js_
+
+```js
+url({
+  fileName: '[dirname][hash][extname]',
+  sourceDir: path.join(__dirname, 'src')
+});
+```
+
+Emitted File: `path/to/image.png`
+
+### `destDir`
+
+Type: `String`<br>
+Default: (empty string)
+
+The destination dir to copy assets, usually used to rebase the assets according to HTML files.

packages/url/package.json

@@ -32,7 +32,7 @@
   "scripts": {
     "dev": "cargo watch -w src -s 'scripts/watch.sh'",
     "bump": "npx changeset version",
-    "play": "cd playground && farm",
+    "play": "cd playground && pnpm dev",
     "build": "farm-plugin-tools build --platform --cargo-name farmfe_plugin_url -p farmfe_plugin_url --release",
     "prepublishOnly": "farm-plugin-tools prepublish"
   },

packages/url/playground/farm.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "@farmfe/core";
-
+import { resolve } from "path"
 export default defineConfig({
   compilation: {
     input: {
@@ -10,5 +10,8 @@ export default defineConfig({
   },
   plugins: [
     ["@farmfe/plugin-react", { runtime: "automatic" }],
+    [
+      "farmfe-plugin-url", { limit: 10 * 1024, public_path: "output/", emit_files: true, dest_dir: resolve(__dirname, "./dist/assets") }
+    ]
   ],
 });

packages/url/playground/index.html

@@ -9,6 +9,6 @@
 </head>
 <body>
   <div id="root"></div>
-  <!-- <script src="./src/index.tsx"></script> -->
+  <script src="./src/index.tsx"></script>
 </body>
 </html>

packages/url/playground/package.json

@@ -10,18 +10,19 @@
     "clean": "farm clean"
   },
   "dependencies": {
+    "@types/node": "^20.14.9",
     "clsx": "^1.2.1",
+    "farmfe-plugin-url": "workspace:*",
     "react": "18",
-    "react-dom": "18",
-    "farmfe-plugin-url": "workspace:*"
+    "react-dom": "18"
   },
   "devDependencies": {
     "@farmfe/cli": "^1.0.0",
     "@farmfe/core": "^1.0.24",
     "@farmfe/plugin-react": "^1.0.1",
     "@types/react": "18",
-    "core-js": "^3.36.1",
     "@types/react-dom": "18",
+    "core-js": "^3.36.1",
     "react-refresh": "^0.14.0"
   }
 }