Failed to upgrade to @remirror/core v0.8.0

Description

I’ve upgraded remirror from the previous version to the latest one, and fixed a type from CommondFunction to ProsemirrorCommandFunction, but my extision just cannot work with strange error:

variable-placeholder-extension.ts:12 Uncaught TypeError: Class constructor NodeExtension cannot be invoked without 'new'
    at new VariablePlaceholderExtension (variable-placeholder-extension.ts:12)
    at remirror-manager.tsx:107
    at Array.forEach (<anonymous>)
    at RemirrorManager.get manager [as manager] (remirror-manager.tsx:101)
    at RemirrorManager.render (remirror-manager.tsx:128)
    at finishClassComponent (react-dom.development.js:18470)
    at updateClassComponent (react-dom.development.js:18423)
    at beginWork$1 (react-dom.development.js:20186)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)

My update is

• @remirror/core: 0.7.4 => 0.8.0
• @remirror/core-extensions: 0.7.4 => 0.7.5
• @remirror/react: 0.7.5 => 0.7.6

Here is the full code of the extension:

import {
  Attrs,
  CommandNodeTypeParams,
  NodeExtension,
  NodeExtensionSpec,
  ProsemirrorCommandFunction
} from "@remirror/core";

export const TAG_NAME = "span" as const;
export const NODE_TYPE = "variable-placeholder" as const;

export class VariablePlaceholderExtension extends NodeExtension {
  get name() {
    return "variablePlaceholder" as const;
  }

  get schema(): NodeExtensionSpec {
    return {
      attrs: {
        ...this.extraAttrs(),
        key: { default: "variable" },
        text: { default: "placeholder" }
      },

      inline: true,
      group: "inline",
      atom: true,

      toDOM: node => [
        TAG_NAME,
        {
          "data-node-type": NODE_TYPE,
          "data-attr-key": node.attrs.key,
          style:
            "display: inline-block; border-radius: 2px; padding: 0 8px; margin: 1px; background-color: #e1eaff; color: #133c9a; line-height: calc(1.5em - 2px);"
        },
        node.attrs.text
      ],

      parseDOM: [
        {
          tag: `${TAG_NAME}[data-node-type="${NODE_TYPE}"]`,
          getAttrs: (dom: any) => {
            return {
              key: dom.getAttribute("data-attr-key"),
              text: dom.textContent
            };
          }
        }
      ]
    };
  }

  public commands({ type }: CommandNodeTypeParams) {
    return {
      insertVariablePlaceholder: (
        attrs?: Attrs
      ): ProsemirrorCommandFunction => (state, dispatch) => {
        const node = type.create(attrs);
        const transaction = state.tr.replaceSelectionWith(node, true);

        if (dispatch) {
          dispatch(transaction);
        }

        return true;
      }
    };
  }
}

Here are how the extension being used:

export const EmailContentEditor: FC<Props> = ({
  initialContent,
  onContentChange,
  onHTMLChange,
  variables = []
}) => {
  const events = useMemo(() => new EventEmitter(), []);

  const handleLinkActivation = useCallback(() => {
    events.emit("activateLink");
  }, [events]);

  const handleChange = useChangeHandler({
    initialContent,
    onContentChange,
    onHTMLChange
  });

  return (
    <RemirrorManager>
      <RemirrorExtension Constructor={BoldExtension} />
      <RemirrorExtension Constructor={ItalicExtension} />
      <RemirrorExtension Constructor={UnderlineExtension} />
      <RemirrorExtension Constructor={StrikeExtension} />
      <RemirrorExtension Constructor={HeadingExtension} levels={[1, 2, 3]} />
      <RemirrorExtension Constructor={ListItemExtension} />
      <RemirrorExtension Constructor={BulletListExtension} />
      <RemirrorExtension Constructor={OrderedListExtension} />
      <RemirrorExtension
        Constructor={LinkExtension}
        activationHandler={handleLinkActivation}
      />
      <RemirrorExtension Constructor={VariablePlaceholderExtension} />
      <ManagedRemirrorProvider
        initialContent={initialContent}
        onChange={handleChange}
      >
        <Fragment>
          <EditorLayout
            menu={<EditorMenu events={events} variables={variables} />}
            editor={<InnerEditor />}
          />
          <EventsHandler events={events} />
        </Fragment>
      </ManagedRemirrorProvider>
    </RemirrorManager>
  );
};

after remove my extension, it works, but by checking the source of other built-in extension, I can’t find out the reason of the broken.

Checklist

• I have read the contributing document.

[ocavue]

Hi @tommoor . Can you try to add "browserslist": ["since 2017"] in your package.json and see if there are still problems?

Quota from the document:

The main reason for this configuration is to support class syntax properly. Projects like next.js automatically compile your code down to es5 which causes problems when extending classes. If you don’t plan on creating your own extensions or presets, you can ignore this requirement.

[ifiokjr]

Makes sense. I’ll make a patch fix in a few hours.