Merge pull request #34621 from luisherranz/improve-loadable__server

loadable__server - add attributes to the get functions

types/loadable__server/index.d.ts

@@ -1,6 +1,7 @@
-// Type definitions for @loadable/server 5.2
+// Type definitions for @loadable/server 5.8
 // Project: https://github.com/smooth-code/loadable-components
 // Definitions by: Martynas Kadiša <https://github.com/martynaskadisa>
+//                 Luis Herranz <https://github.com/luisherranz>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -27,6 +28,24 @@ export type ChunkExtractorOptions = {
 	stats: object;
  });
 
+/**
+ * Chunk that is received by the AttrFn function.
+ */
+export interface Chunk {
+	chunk: string;
+	filename: string;
+	linkType: string;
+	path: string;
+	scriptType: string;
+	type: string;
+	url: string;
+}
+
+/**
+ * Used to insert attributes in the get functions.
+ */
+export type AttrFn = (chunk: Chunk) => {};
+
 /**
  * Used to collect chunks server-side and get them as script tags or script elements
  */
@@ -51,32 +70,32 @@ export class ChunkExtractor {
 	/**
 	 * Get scripts as a string of `<script>` tags
 	 */
-	getScriptTags(): string;
+	getScriptTags(attr?: {} | AttrFn): string;
 
 	/**
 	 * Get scripts as an array of React `<script>` elements.
 	 */
-	getScriptElements(): Array<ReactElement<{}>>;
+  	getScriptElements(attr?: {} | AttrFn): Array<ReactElement<{}>>;
 
 	/**
 	 * Get "prefetch" and "preload" links as a string of `<link>` tags
 	 */
-	getLinkTags(): string;
+  	getLinkTags(attr?: {} | AttrFn): string;
 
 	/**
 	 * Get "prefetch" and "preload" links as an array of React `<link>` elements
 	 */
-	getLinkElements(): Array<ReactElement<{}>>;
+  	getLinkElements(attr?: {} | AttrFn): Array<ReactElement<{}>>;
 
 	/**
 	 * Get style links as a string of `<link>` tags
 	 */
-	getStyleTags(): string;
+  	getStyleTags(attr?: {} | AttrFn): string;
 
 	/**
 	 * Get style links as an array of React `<link>` elements
 	 */
-	getStyleElements(): Array<ReactElement<{}>>;
+  	getStyleElements(attr?: {} | AttrFn): Array<ReactElement<{}>>;
 }
 
 export interface ChunkExtractorManagerProps {

types/loadable__server/loadable__server-tests.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChunkExtractor } from '@loadable/server';
+import { ChunkExtractor, AttrFn } from '@loadable/server';
 
 // Should be satisfied by `stats` or `statsFile`
 new ChunkExtractor({ stats: {} });
@@ -25,40 +25,83 @@ const {
     const jsx: JSX.Element = collectChunks(<div>Test</div>);
 }
 
+// Some example attributes for get functions.
+const attributes = {
+    type: "module",
+    "data-type": "loadable"
+};
+
+// An attribute function for get functions.
+const attrFn: AttrFn = (chunk) => {
+    return {
+        chunk: chunk.chunk,
+        filename: chunk.filename,
+        linkType: chunk.linkType,
+        path: chunk.path,
+        scriptType: chunk.scriptType,
+        type: chunk.type,
+        url: chunk.url
+    };
+};
+
 // getLinkElements
 {
     // Should return an array of React elements
     const elements: Array<React.ReactElement<{}>> = getLinkElements();
+    const elementsWithAttrs: Array<React.ReactElement<{}>> = getLinkElements(
+        attributes
+    );
+    const elementsWithAttrFn: Array<React.ReactElement<{}>> = getLinkElements(
+        attrFn
+    );
 }
 
 // getLinkTags
 {
     // Should return a string
     const tags: string = getLinkTags();
+    const tagsWithAttrs: string = getLinkTags(attributes);
+    const tagsWithAttrFn: string = getLinkTags(attrFn);
 }
 
 // getScriptElements
 {
     // Should return an array of React elements
     const elements: Array<React.ReactElement<{}>> = getScriptElements();
+    const elementsWithAttrs: Array<React.ReactElement<{}>> = getScriptElements(
+        attributes
+    );
+    const elementsWithAttrFn: Array<React.ReactElement<{}>> = getScriptElements(
+        attrFn
+    );
 }
 
 // getScriptTags
 {
     // Should return a string
     const tags: string = getScriptTags();
+    const tagsWithAttrs: string = getScriptTags(attributes);
+    const tagsWithAttrFn: string = getScriptTags(attrFn);
 }
 
 // getStyleElements
 {
     // Should return an array of React elements
     const elements: Array<React.ReactElement<{}>> = getStyleElements();
+    const elementsWithAttrs: Array<React.ReactElement<{}>> = getStyleElements(
+        attributes
+    );
+    const elementsWithAttrFn: Array<React.ReactElement<{}>> = getStyleElements(
+        attrFn
+    );
 }
 
 // getStyleTags
 {
     // Should return a string
     const tags: string = getStyleTags();
+    const tagsWithAttrs: string = getStyleTags(attributes);
+    const tagsWithAttrFn: string = getStyleTags(attrFn);
 }
 
 // requireEntrypoint