Next-generation API

package.json

@@ -68,6 +68,7 @@
         "plugin:rut/recommended"
       ],
       "rules": {
+        "no-param-reassign": "off",
         "import/no-named-as-default": "off",
         "require-unicode-regexp": "off",
         "react/jsx-no-literals": "off",

packages/autolink/src/Email.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Link from './Link';
 import { EmailProps } from './types';
 
-export default function Email({ children, email, emailParts, ...props }: EmailProps) {
+export default function Email({ children, email, ...props }: EmailProps) {
   return (
     <Link {...props} href={`mailto:${email}`}>
       {children}

packages/autolink/src/Hashtag.tsx

@@ -4,34 +4,34 @@ import { HashtagProps } from './types';
 
 export default function Hashtag({
   children,
-  encodeHashtag = false,
+  encoded = false,
   hashtag,
-  hashtagUrl = '{{hashtag}}',
-  preserveHash = false,
+  preserved = false,
+  url = '{{hashtag}}',
   ...props
 }: HashtagProps) {
   let tag = hashtag;
 
   // Prepare the hashtag
-  if (!preserveHash && tag.charAt(0) === '#') {
+  if (!preserved && tag.charAt(0) === '#') {
     tag = tag.slice(1);
   }
 
-  if (encodeHashtag) {
+  if (encoded) {
     tag = encodeURIComponent(tag);
   }
 
   // Determine the URL
-  let url = hashtagUrl || '{{hashtag}}';
+  let href = url || '{{hashtag}}';
 
-  if (typeof url === 'function') {
-    url = url(tag);
+  if (typeof href === 'function') {
+    href = href(tag);
   } else {
-    url = url.replace('{{hashtag}}', tag);
+    href = href.replace('{{hashtag}}', tag);
   }
 
   return (
-    <Link {...props} href={url}>
+    <Link {...props} href={href}>
       {children}
     </Link>
   );

packages/autolink/src/Url.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import Link from './Link';
 import { UrlProps } from './types';
 
-export default function Url({ children, url, urlParts, ...props }: UrlProps) {
-  let href = url;
+export default function Url({ children, href, ...props }: UrlProps) {
+  let ref = href;
 
-  if (!href.match(/^https?:\/\//)) {
-    href = `http://${href}`;
+  if (!ref.match(/^https?:\/\//)) {
+    ref = `http://${ref}`;
   }
 
   return (
-    <Link {...props} href={href}>
+    <Link {...props} href={ref}>
       {children}
     </Link>
   );

packages/autolink/src/emailMatcher.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { createMatcher } from 'interweave';
+import Email from './Email';
+import { EMAIL_PATTERN } from './constants';
+import { EmailMatch } from './types';
+
+export default createMatcher<EmailMatch, object>(
+  EMAIL_PATTERN,
+  ({ email }, props, children) => <Email email={email}>{children}</Email>,
+  {
+    onMatch: ({ matches }) => ({
+      email: matches[0],
+      parts: {
+        host: matches[2],
+        username: matches[1],
+      },
+    }),
+    tagName: 'a',
+  },
+);

packages/autolink/src/hashtagMatcher.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createMatcher } from 'interweave';
+import Hashtag from './Hashtag';
+import { HASHTAG_PATTERN } from './constants';
+import { HashtagMatch } from './types';
+
+export default createMatcher<HashtagMatch, object>(
+  HASHTAG_PATTERN,
+  ({ hashtag }, props, children) => <Hashtag hashtag={hashtag}>{children}</Hashtag>,
+  {
+    onMatch: ({ matches }) => ({
+      hashtag: matches[0],
+    }),
+    tagName: 'a',
+  },
+);

packages/autolink/src/index.ts

@@ -3,16 +3,16 @@
  * @license     https://opensource.org/licenses/MIT
  */
 
+import emailMatcher from './emailMatcher';
+import hashtagMatcher from './hashtagMatcher';
+import ipMatcher from './ipMatcher';
+import urlMatcher from './urlMatcher';
 import Email from './Email';
-import EmailMatcher from './EmailMatcher';
 import Hashtag from './Hashtag';
-import HashtagMatcher from './HashtagMatcher';
-import IpMatcher from './IpMatcher';
 import Link from './Link';
 import Url from './Url';
-import UrlMatcher from './UrlMatcher';
 
-export { Email, EmailMatcher, Hashtag, HashtagMatcher, IpMatcher, Link, Url, UrlMatcher };
+export { emailMatcher, hashtagMatcher, ipMatcher, urlMatcher, Email, Hashtag, Link, Url };
 
 export * from './constants';
 export * from './types';

packages/autolink/src/ipMatcher.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createMatcher } from 'interweave';
+import Url from './Url';
+import { onMatch } from './urlMatcher';
+import { IP_PATTERN } from './constants';
+import { UrlMatch } from './types';
+
+export default createMatcher<UrlMatch, object>(
+  IP_PATTERN,
+  ({ url }, props, children) => <Url href={url}>{children}</Url>,
+  { onMatch, tagName: 'a' },
+);

packages/autolink/src/types.ts

@@ -1,35 +1,42 @@
 import React from 'react';
-import { ChildrenNode } from 'interweave';
 
 export interface LinkProps {
-  children: React.ReactNode;
-  href: string;
-  key?: string | number;
+  children: NonNullable<React.ReactNode>;
+  href?: string;
   newWindow?: boolean;
-  onClick?: () => void | null;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
 }
 
-export interface EmailProps extends Partial<LinkProps> {
-  children: ChildrenNode;
+export interface EmailProps extends LinkProps {
   email: string;
-  emailParts: {
+}
+
+export interface EmailMatch {
+  email: string;
+  parts: {
     host: string;
     username: string;
   };
 }
 
-export interface HashtagProps extends Partial<LinkProps> {
-  children: ChildrenNode;
-  encodeHashtag?: boolean;
+export interface HashtagProps extends LinkProps {
+  encoded?: boolean;
+  hashtag: string;
+  url?: string | ((hashtag: string) => string);
+  preserved?: boolean;
+}
+
+export interface HashtagMatch {
   hashtag: string;
-  hashtagUrl?: string | ((hashtag: string) => string);
-  preserveHash?: boolean;
 }
 
-export interface UrlProps extends Partial<LinkProps> {
-  children: ChildrenNode;
+export interface UrlProps extends LinkProps {
+  href: string;
+}
+
+export interface UrlMatch {
   url: string;
-  urlParts: {
+  parts: {
     auth: string;
     fragment: string;
     host: string;