chore(deps): update dependency kkt to v7

Author: jaywcjlove

.kktrc.ts

@@ -6,7 +6,7 @@ import rawModules from '@kkt/raw-modules';
 import scopePluginOptions from '@kkt/scope-plugin-options';
 import pkg from './package.json';
 
-export default (conf: Configuration, env: string, options: LoaderConfOptions) => {
+export default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {
   conf = rawModules(conf, env, { ...options });
   conf = scopePluginOptions(conf, env, {
     ...options,
@@ -19,6 +19,14 @@ export default (conf: Configuration, env: string, options: LoaderConfOptions) =>
   conf.plugins!.push(new webpack.DefinePlugin({
     VERSION: JSON.stringify(pkg.version),
   }));
+
+  if (conf.module && conf.module.rules && conf.module.rules[0]) {
+    const rules = conf.module.rules[0];
+    if (typeof rules === 'object' && typeof rules.loader === 'string' && /source-map-loader/.test(rules.loader)) {
+      ;(conf.module.rules[0] as any).exclude = /((@babel(?:\/|\\{1,2})runtime)|codesandbox-import-utils)/;
+    }
+  }
+
   if (env === 'production') {
     conf.output = { ...conf.output, publicPath: './' }
   }

package.json

@@ -37,16 +37,16 @@
     "codesandbox-import-utils": "2.2.3"
   },
   "devDependencies": {
-    "@kkt/less-modules": "6.11.0",
-    "@kkt/raw-modules": "6.11.0",
-    "@kkt/scope-plugin-options": "6.11.0",
+    "@kkt/less-modules": "7.0.1",
+    "@kkt/raw-modules": "7.0.1",
+    "@kkt/scope-plugin-options": "7.0.1",
     "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
     "@uiw/react-github-corners": "1.5.3",
     "@uiw/react-markdown-preview": "3.4.5",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "kkt": "6.11.0",
+    "kkt": "7.0.1",
     "tsbb": "3.5.4"
   },
   "eslintConfig": {

src/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { getParameters } from 'codesandbox-import-utils/lib/api/define';
 
-export type CodeSandboxProps = React.FormHTMLAttributes<HTMLFormElement> & {
+export type CodeSandboxBase = {
   /**
    * Whether we should redirect to the embed instead of the editor.
    */
@@ -23,9 +23,11 @@ export type CodeSandboxProps = React.FormHTMLAttributes<HTMLFormElement> & {
     content?: string | Record<string, any>;
     isBinary?: boolean;
   }>
-};
+}
+
+export type CodeSandboxProps<T> = React.FormHTMLAttributes<T> & CodeSandboxBase;
 
-function request(files: CodeSandboxProps['files']) {
+function request<T>(files: CodeSandboxProps<T>['files']) {
   return fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
     method: "POST",
     headers: {
@@ -35,11 +37,10 @@ function request(files: CodeSandboxProps['files']) {
     body: JSON.stringify({
       files: files,
     })
-  }).
-  then(x => x.json())
+  }).then(x => x.json());
 }
 
-const codeSandbox: React.FC<CodeSandboxProps> = (props) => {
+const CodeSandbox: React.FC<CodeSandboxProps<HTMLFormElement | HTMLIFrameElement>> = (props) => {
   const { files = {}, embed, json, query, ...other } = props || {};
   const parameters = getParameters({ files } as any);
   const [url, setUrl] = useState<string>();
@@ -52,16 +53,20 @@ const codeSandbox: React.FC<CodeSandboxProps> = (props) => {
         }
       });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [files]);
   if (!props.children) {
     return (
       <iframe
+        {...other}
+        title={other.title || 'Example.'}
         src={url}
         style={{
           width: '100%',
           height: '100%',
           border: 0,
-          overflow: 'hidden'
+          overflow: 'hidden',
+          ...other.style,
         }}
         allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
         sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -77,6 +82,7 @@ const codeSandbox: React.FC<CodeSandboxProps> = (props) => {
       <button type="submit">{props.children}</button>
     </form>
   )
+
 }
 
-export default codeSandbox;
+export default CodeSandbox;