addon-dev: Inline sample files as docs in the README and Porting Addons to V2 Docs.

docs/porting-addons-to-v2.md

@@ -215,9 +215,115 @@ Now that we've separated the test-app and docs app concerns from the addon, we c
 
    `yarn add --dev @embroider/addon-dev rollup @rollup/plugin-babel @babel/core @babel/plugin-transform-class-properties @babel/plugin-proposal-decorators`
 
-6. Grab the [example babel config](https://github.com/embroider-build/embroider/blob/main/packages/addon-dev/sample-babel.config.json) and save it as `addon/babel.config.json`
-   - If you addon requires template transforms in order to publish to a shareable format. Apply transforms using the `babel-plugin-ember-template-compilation`. View how to use this in the [example babel.config.js](https://github.com/embroider-build/embroider/blob/main/packages/addon-dev/sample-babel.config.js)
-7. Grab the [example rollup config](https://github.com/embroider-build/embroider/blob/main/packages/addon-dev/sample-rollup.config.js) and save it as `addon/rollup.config.js`.
+6. Grab the example babel config (below) and save it as `addon/babel.config.json`
+   - If you addon requires template transforms in order to publish to a shareable format. Apply transforms using the `babel-plugin-ember-template-compilation`. View how to use this in the example babel.config.cjs (below).
+
+  <details><summary>example babel.config.json</summary>
+
+
+  ```json
+  {
+    "plugins": [
+      "@embroider/addon-dev/template-colocation-plugin",
+      ["@babel/plugin-proposal-decorators", { "legacy": true }],
+      "@babel/plugin-transform-class-properties"
+    ]
+  }
+  ```
+
+  </details>
+
+  <details><summary>example babel.config.cjs</summary>
+
+  ```js
+  // Some addons need to transform their templates before they have a portable format.
+  // In "classic" builds this was done at the application. In embroider it should
+  // be done during the addon build.
+  const someAstTransformPlugin = require('./some-ast-transform-plugin');
+
+  module.exports = {
+    plugins: [
+      '@embroider/addon-dev/template-colocation-plugin',
+      [
+        'babel-plugin-ember-template-compilation',
+        {
+          targetFormat: 'hbs',
+          compilerPath: 'ember-source/dist/ember-template-compiler',
+          transforms: [
+            someAstTransformPlugin,
+            './path/to/another-template-transform-plugin',
+          ],
+        },
+      ],
+      ['@babel/plugin-proposal-decorators', { legacy: true }],
+      '@babel/plugin-transform-class-properties',
+    ],
+  };
+  ```
+
+  </details>
+
+
+7. Grab the this example rollup config and save it as `addon/rollup.config.mjs`.
+
+  <details><summary>example rollup.config.mjs</summary>
+
+  ```js
+  import babel from '@rollup/plugin-babel';
+  import { Addon } from '@embroider/addon-dev/rollup';
+
+  const addon = new Addon({
+    srcDir: 'src',
+    destDir: 'dist',
+  });
+
+  export default {
+    // This provides defaults that work well alongside `publicEntrypoints` below.
+    // You can augment this if you need to.
+    output: addon.output(),
+
+    plugins: [
+      // These are the modules that users should be able to import from your
+      // addon. Anything not listed here may get optimized away.
+      addon.publicEntrypoints(['components/**/*.js', 'index.js']),
+
+      // These are the modules that should get reexported into the traditional
+      // "app" tree. Things in here should also be in publicEntrypoints above, but
+      // not everything in publicEntrypoints necessarily needs to go here.
+      addon.appReexports(['components/welcome-page.js']),
+
+      // This babel config should *not* apply presets or compile away ES modules.
+      // It exists only to provide development niceties for you, like automatic
+      // template colocation.
+      //
+      // By default, this will load the actual babel config from the file
+      // babel.config.json.
+      babel({
+        babelHelpers: 'bundled',
+      }),
+
+      // Follow the V2 Addon rules about dependencies. Your code can import from
+      // `dependencies` and `peerDependencies` as well as standard Ember-provided
+      // package names.
+      addon.dependencies(),
+
+      // Ensure that standalone .hbs files are properly integrated as Javascript.
+      addon.hbs(),
+
+      // addons are allowed to contain imports of .css files, which we want rollup
+      // to leave alone and keep in the published output.
+      addon.keepAssets(['**/*.css']),
+
+      // Remove leftover build artifacts when starting a new build.
+      addon.clean(),
+    ],
+  };
+  ```
+
+  </details>
+
+
+
 8. Identify your **app reexports**. This is the list of modules from your addon that get reexported by files in the `addon/app` directory.
 9. Delete the `addon/app` directory. You aren't going to need it anymore.
 10. Edit `addon/rollup.config.js`. Customize the `publicEntrypoints` so it includes

packages/addon-dev/README.md

@@ -15,8 +15,112 @@ For a guide on porting a V1 addon to V2, see https://github.com/embroider-build/
    - @babel/core
    - @rollup/plugin-babel
 
-2. Copy the `./sample-rollup.config.js` in this repo to your own `rollup.config.js`.
-3. Copy the `./sample-babel.config.json` in this repo to your own `babel.config.json`.
+2. Copy the sample `rollup.config.mjs` in this repo to your own `rollup.config.mjs`.
+
+  <details><summary>sample rollup.config.mjs</summary>
+
+  ```js
+  import babel from '@rollup/plugin-babel';
+  import { Addon } from '@embroider/addon-dev/rollup';
+
+  const addon = new Addon({
+    srcDir: 'src',
+    destDir: 'dist',
+  });
+
+  export default {
+    // This provides defaults that work well alongside `publicEntrypoints` below.
+    // You can augment this if you need to.
+    output: addon.output(),
+
+    plugins: [
+      // These are the modules that users should be able to import from your
+      // addon. Anything not listed here may get optimized away.
+      addon.publicEntrypoints(['components/**/*.js', 'index.js']),
+
+      // These are the modules that should get reexported into the traditional
+      // "app" tree. Things in here should also be in publicEntrypoints above, but
+      // not everything in publicEntrypoints necessarily needs to go here.
+      addon.appReexports(['components/welcome-page.js']),
+
+      // This babel config should *not* apply presets or compile away ES modules.
+      // It exists only to provide development niceties for you, like automatic
+      // template colocation.
+      //
+      // By default, this will load the actual babel config from the file
+      // babel.config.json.
+      babel({
+        babelHelpers: 'bundled',
+      }),
+
+      // Follow the V2 Addon rules about dependencies. Your code can import from
+      // `dependencies` and `peerDependencies` as well as standard Ember-provided
+      // package names.
+      addon.dependencies(),
+
+      // Ensure that standalone .hbs files are properly integrated as Javascript.
+      addon.hbs(),
+
+      // addons are allowed to contain imports of .css files, which we want rollup
+      // to leave alone and keep in the published output.
+      addon.keepAssets(['**/*.css']),
+
+      // Remove leftover build artifacts when starting a new build.
+      addon.clean(),
+    ],
+  };
+  ```
+
+  </details>
+
+3. Copy the sample `babel.config.json` in this repo to your own `babel.config.json`.
+
+  <details><summary>sample babel.config.json</summary>
+
+
+  ```json
+  {
+    "plugins": [
+      "@embroider/addon-dev/template-colocation-plugin",
+      ["@babel/plugin-proposal-decorators", { "legacy": true }],
+      "@babel/plugin-transform-class-properties"
+    ]
+  }
+  ```
+
+  </details>
+
+  alternatively, a `babel.config.cjs` may be used and that would like like this:
+
+  <details><summary>sample babel.config.cjs</summary>
+
+  ```js
+  // Some addons need to transform their templates before they have a portable format.
+  // In "classic" builds this was done at the application. In embroider it should
+  // be done during the addon build.
+  const someAstTransformPlugin = require('./some-ast-transform-plugin');
+
+  module.exports = {
+    plugins: [
+      '@embroider/addon-dev/template-colocation-plugin',
+      [
+        'babel-plugin-ember-template-compilation',
+        {
+          targetFormat: 'hbs',
+          compilerPath: 'ember-source/dist/ember-template-compiler',
+          transforms: [
+            someAstTransformPlugin,
+            './path/to/another-template-transform-plugin',
+          ],
+        },
+      ],
+      ['@babel/plugin-proposal-decorators', { legacy: true }],
+      '@babel/plugin-transform-class-properties',
+    ],
+  };
+  ```
+
+  </details>
 
 ## addon-dev command