Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Embroider support #2500

Closed
wants to merge 32 commits into from
Closed

Conversation

NullVoxPopuli
Copy link

@NullVoxPopuli NullVoxPopuli commented Jun 28, 2023

This PR is exploring what it would take to properly support embroider for ember-cli-mirage.

There are a couple things that ember-cli-mirage is doing currently that are not compatible with how modern JS works:

  • the mirage folder lives outside the app, yet is expected to be able to import from the app
  • the mirage folder is merged with the ember-cli-mirage addon, which is why files from the mirage folder cannot import from the app

It is reasonable that folks want to share constants / functions / whatever from their app with their mirage folder, so a goal of this PR is to figure out how to do that.

This PR will be large because it adds a new app: 03-embroider-app under test-packages -- so a good chunk of the diff is boilerplate and lockfile.

!! This is still in the exploratory phase

CI is running over in my fork: NullVoxPopuli#1

Breaking Changes

All pending, of course, just logging as I go

miragejs is now a peer dependency

This means that the consuming app must install miragejs.
This change happened because apps were importing from miragejs.
If you import it, it must be declared (in the package.json)

The mirage folder is now in the app directory

mv ./mirage ./app/

Setup is now in userland

create an app/initializers/setup-mirage.js

import config from '<app-name>/config/environment';

import { setupMirage } from 'ember-cli-mirage';
import makeServer from '<app-name>/mirage/config';

export default {
  name: 'setup-mirage',
  initialize(application) {
    setupMirage(config, makeServer, application);
  },
};

Configuration is now via @embroider/macros

module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
    '@embroider/macros': {
      setConfig: {
        'ember-cli-mirage': {
          enabled: true, // false by default
          usingProxy: false, // false by default
        },
      },
    },
  });
  
  // ...

Mirage is disabled by default

Mirage is not a production tool, so it is disabled by default. to enable you can configure as above.
This allows folks to choose the logic by which mirage is enabled:

module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
    '@embroider/macros': {
      setConfig: {
        'ember-cli-mirage': {
          enabled: yn(process.env['ENABLE_MIRAGE']),
          usingProxy: false, // false by default
        },
      },
    },
  });
  
  // ...

Embroider (temporarily) needs the compat adapter disabled

// ember-cil-build.js
  /* ... */

  const { V1Addon } = require('@embroider/compat');
  const compatAdapters = new Map();

  compatAdapters.set('ember-cli-mirage', class extends V1Addon {});

  const { Webpack } = require('@embroider/webpack');
  return require('@embroider/compat').compatBuild(app, Webpack, {
    skipBabel: [
      {
        package: 'qunit',
      },
    ],
    compatAdapters,
  });

https://github.com/embroider-build/embroider/blob/main/packages/compat/src/compat-adapters/ember-cli-mirage.ts

the modulePrefix and podModulePrefix must manually be passed

This is for discoverEmberDataModels and applyEmberDataSerializer

example:

// app/mirage/config
import {
  discoverEmberDataModels,
  applyEmberDataSerializers,
} from 'ember-cli-mirage';
import { createServer } from 'miragejs';
import ENV from '<app-name>/config/environment';

export default function (config) {
  let finalConfig = {
    ...config,
    models: { ...discoverEmberDataModels(ENV), ...config.models },
    serializers: applyEmberDataSerializers(config.serializers, ENV),
    routes,
  };

  return createServer(finalConfig);
}

function routes() {
  //
  // {
  //   "message": "API rate limit exceeded for 72.229.126.12. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)",
  //   "documentation_url": "https://developer.github.com/v3/#rate-limiting"
  // }

  this.passthrough();
  this.passthrough('https://api.github.com/*');
}

@NullVoxPopuli
Copy link
Author

It's looking like this repo has been neglected long enough where the required changes to get everything working is going to require a good few PRs.

…ll, because @babel/core is unused by the babel that runs in the apps (for now) -- ember-cli-babel v8 will fix this
@SergeAstapov
Copy link
Collaborator

@NullVoxPopuli this looks promising! Please note I've made CI green in #2495.
I think we could introduce 03-embroider-app under test-packages in a separate PR for the sake of keeping PRs manageable (it could be embroider enabled but with no code and not included in CI)

Then we could see if any other pieces could be split up.

@aklkv
Copy link

aklkv commented Oct 26, 2023

@NullVoxPopuli anything I can help with to get this PR work over the finish line?

@NullVoxPopuli
Copy link
Author

based on the conflicts, I think the PR has to start over. But if you want to take over, go for it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants