├── .github
    ├── FUNDING.yml
    └── workflows
    │   └── ci.yml
├── .gitignore
├── .husky
    └── pre-commit
├── .prettierignore
├── .prettierrc
├── LICENSE
├── README.md
├── core
    ├── README.md
    ├── package.json
    ├── src
    │   ├── Context.tsx
    │   └── index.tsx
    └── tsconfig.json
├── lerna.json
├── package.json
├── renovate.json
├── test
    └── index.test.tsx
├── tsconfig.json
└── website
    ├── .kktrc.ts
    ├── README.md
    ├── package.json
    ├── public
        ├── favicon.ico
        └── index.html
    ├── src
        ├── index.tsx
        └── react-app-env.d.ts
    └── tsconfig.json


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | ko_fi: jaywcjlove
2 | buy_me_a_coffee: jaywcjlove
3 | custom: ["https://www.paypal.me/kennyiseeyou", "https://jaywcjlove.github.io/#/sponsor"]
4 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
  1 | name: CI
  2 | on:
  3 |   push:
  4 |     branches:
  5 |       - main
  6 | 
  7 | # env:
  8 | #   SKIP_PREFLIGHT_CHECK: true
  9 | jobs:
 10 |   windows:
 11 |     runs-on: windows-latest
 12 |     steps:
 13 |       - uses: actions/checkout@v4
 14 |       - uses: actions/setup-node@v4
 15 |         with:
 16 |           node-version: 20
 17 | 
 18 |       - name: Look Changelog
 19 |         uses: jaywcjlove/changelog-generator@main
 20 |         with:
 21 |           filter-author: (小弟调调™|Renovate Bot|renovate-bot)
 22 |           filter: '[R|r]elease[d]\s+[v|V]\d(\.\d+){0,2}'
 23 | 
 24 |       - run: npm install --unsafe-perm
 25 |       # - run: npm run hoist
 26 |       - run: npm run build
 27 |       - run: npm run coverage
 28 |       - run: npm run doc
 29 | 
 30 |   build:
 31 |     runs-on: ubuntu-latest
 32 |     permissions:
 33 |       contents: write
 34 |       id-token: write
 35 |     steps:
 36 |       - uses: actions/checkout@v4
 37 |       - uses: actions/setup-node@v4
 38 |         with:
 39 |           node-version: 18
 40 |           registry-url: 'https://registry.npmjs.org'
 41 | 
 42 |       - run: npm install --unsafe-perm
 43 |       # - run: npm run hoist
 44 |       - run: npm run build
 45 |       - run: npm run coverage
 46 |       - run: npm run doc
 47 | 
 48 |       - name: Generate Contributors Images
 49 |         uses: jaywcjlove/github-action-contributors@main
 50 |         with:
 51 |           filter-author: (renovate\[bot\]|renovate-bot|dependabot\[bot\])
 52 |           output: website/build/CONTRIBUTORS.svg
 53 |           avatarSize: 42
 54 | 
 55 |       - name: Create Coverage Badges
 56 |         uses: jaywcjlove/coverage-badges-cli@main
 57 |         with:
 58 |           output: website/build/badges.svg
 59 | 
 60 |       - run: cp -rp coverage website/build
 61 | 
 62 |       - name: Is a tag created auto?
 63 |         id: create_tag
 64 |         uses: jaywcjlove/create-tag-action@main
 65 |         with:
 66 |           token: ${{ secrets.GITHUB_TOKEN }}
 67 |           package-path: ./core/package.json
 68 | 
 69 |       - name: get tag version
 70 |         id: tag_version
 71 |         uses: jaywcjlove/changelog-generator@main
 72 | 
 73 |       - name: Deploy
 74 |         uses: peaceiris/actions-gh-pages@v4
 75 |         with:
 76 |           commit_message: ${{steps.tag_version.outputs.tag}} ${{ github.event.head_commit.message }}
 77 |           github_token: ${{ secrets.GITHUB_TOKEN }}
 78 |           publish_dir: ./website/build
 79 | 
 80 |       - name: Generate Changelog
 81 |         id: changelog
 82 |         uses: jaywcjlove/changelog-generator@main
 83 |         if: steps.create_tag.outputs.successful
 84 |         with:
 85 |           head-ref: ${{ steps.create_tag.outputs.version }}
 86 |           filter-author: (小弟调调™|Renovate Bot|renovate-bot)
 87 |           filter: '[R|r]elease[d]\s+[v|V]\d(\.\d+){0,2}'
 88 | 
 89 |       - name: Create Release
 90 |         uses: ncipollo/release-action@v1
 91 |         if: steps.create_tag.outputs.successful
 92 |         with:
 93 |           token: ${{ secrets.GITHUB_TOKEN }}
 94 |           allowUpdates: true
 95 |           name: ${{ steps.changelog.outputs.tag }}
 96 |           tag: ${{ steps.changelog.outputs.tag }}
 97 |           body: |
 98 |             Documentation ${{ steps.changelog.outputs.tag }}: https://raw.githack.com/uiwjs/react-iframe/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html  
 99 |             Comparing Changes: ${{ steps.changelog.outputs.compareurl }}  
100 |             
101 |             ${{ steps.changelog.outputs.changelog }}
102 | 
103 |       - run: npm publish --access public --provenance
104 |         name: 📦 @uiw/react-iframe to NPM
105 |         working-directory: core
106 |         continue-on-error: true
107 |         env:
108 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
109 |     


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | coverage
 3 | dist
 4 | build
 5 | lib
 6 | esm
 7 | cjs
 8 | 
 9 | dist.css
10 | 
11 | # Log files
12 | npm-debug.log*
13 | yarn.lock
14 | yarn-debug.log*
15 | yarn-error.log*
16 | pnpm-debug.log*
17 | package-lock.json
18 | 
19 | # local env files
20 | .env.local
21 | .env.*.local
22 | 
23 | # Editor directories and files
24 | .DS_Store
25 | .idea
26 | .lerna_backup
27 | .vscode
28 | *.suo
29 | *.ntvs*
30 | *.njsproj
31 | *.sln
32 | *.sw?
33 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | 
4 | npx --no-install lint-staged


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | **/*.md
 2 | **/*.svg
 3 | **/*.ejs
 4 | **/*.yml
 5 | package.json
 6 | node_modules
 7 | dist
 8 | build
 9 | lib
10 | esm
11 | cjs
12 | test


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "singleQuote": true,
 3 |   "trailingComma": "all",
 4 |   "printWidth": 120,
 5 |   "overrides": [
 6 |     {
 7 |       "files": ".prettierrc",
 8 |       "options": { "parser": "json" }
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 uiw
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | core/README.md


--------------------------------------------------------------------------------
/core/README.md:
--------------------------------------------------------------------------------
  1 | react-iframe
  2 | ===
  3 | 
  4 | [![Build & Deploy](https://github.com/uiwjs/react-iframe/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-iframe/actions/workflows/ci.yml)
  5 | [![Coverage Status](https://uiwjs.github.io/react-iframe/badges.svg)](https://uiwjs.github.io/react-iframe/coverage/lcov-report/)
  6 | [![npm version](https://img.shields.io/npm/v/@uiw/react-iframe.svg)](https://www.npmjs.com/package/@uiw/react-iframe)
  7 | 
  8 | This component allows you to wrap your entire React application or each component in an [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).
  9 | ## Features
 10 | 
 11 | 📚 Use Typescript to write, better code hints.  
 12 | 📦 Zero dependencies.  
 13 | 🐝 Encapsulation based on function components.  
 14 | 🍄 Provides comprehensive code test coverage.  
 15 | 🌐 Complete official document [demo preview](https://uiwjs.github.io/react-iframe/).  
 16 | 
 17 | ## Installation
 18 | 
 19 | ```bash
 20 | npm i @uiw/react-iframe
 21 | ```
 22 | 
 23 | ## Basic Usage
 24 | 
 25 | ```jsx mdx:preview
 26 | import React from 'react';
 27 | import IFrame from '@uiw/react-iframe';
 28 | 
 29 | export default function Demo() {
 30 |   return (
 31 |     <IFrame>
 32 |       <h1>Hello World!</h1>
 33 |     </IFrame>
 34 |   );
 35 | }
 36 | ```
 37 | 
 38 | ## `head`
 39 | 
 40 | The `head` prop is a dom node that gets inserted before the children of the frame. 
 41 | 
 42 | ```jsx mdx:preview
 43 | import React from 'react';
 44 | import IFrame from '@uiw/react-iframe';
 45 | 
 46 | const head = (
 47 |   <style>{`body { background: red; }`}</style>
 48 | );
 49 | 
 50 | export default function Demo() {
 51 |   return (
 52 |     <IFrame head={head}>
 53 |       <h1>Hello World!</h1>
 54 |     </IFrame>
 55 |   );
 56 | }
 57 | ```
 58 | 
 59 | ## `initialContent`
 60 | 
 61 | The `initialContent` props is the initial html injected into frame. It is only injected once, but allows you to insert any html into the frame (e.g. a [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) tag, [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) tags, etc). Note that it does not update if you change the prop. 
 62 | 
 63 | Defaults to `<!DOCTYPE html><html><head></head><body></body></html>`
 64 | 
 65 | ```jsx mdx:preview
 66 | import React from 'react';
 67 | import IFrame from '@uiw/react-iframe';
 68 | 
 69 | const initialContent = '<!DOCTYPE html><html><head><title>React IFrame</title><meta name="keywords" content="react,iframe,component,development" /></head><body></body></html>';
 70 | 
 71 | export default function Demo() {
 72 |   return (
 73 |     <IFrame initialContent={initialContent}>
 74 |       <div style={{ fontSize: 32, color: 'red' }}>Hello World!</div>
 75 |     </IFrame>
 76 |   );
 77 | }
 78 | ```
 79 | 
 80 | ## `mountTarget`
 81 | 
 82 | The `mountTarget` attribute is a css selector (`#target`/`.target`) that specifies the child within the initial content of the iframe to be mounted.
 83 | 
 84 | ```jsx mdx:preview
 85 | import React from 'react';
 86 | import IFrame from '@uiw/react-iframe';
 87 | 
 88 | const initialContent = '<!DOCTYPE html><html><head></head><body><h1>i wont be changed</h1><div id="mountHere"></div></body></html>';
 89 | 
 90 | export default function Demo() {
 91 |   return (
 92 |     <IFrame initialContent={initialContent} mountTarget="#mountHere">
 93 |       <div style={{ fontSize: 32, color: 'red' }}>Hello World!</div>
 94 |     </IFrame>
 95 |   );
 96 | }
 97 | ```
 98 | 
 99 | ## `ref`
100 | 
101 | The ref prop provides a way to access inner [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) DOM node.
102 | 
103 | ```tsx mdx:preview
104 | import React, { useEffect, useState, Fragment } from 'react';
105 | import IFrame from '@uiw/react-iframe';
106 | 
107 | export default function Demo() {
108 |   const [iframeRef, setIframeRef] = useState();
109 |   const [count, setCount] = useState(0);
110 | 
111 |   useEffect(() => {
112 |     if (iframeRef) {
113 |       iframeRef.focus();
114 |     }
115 |   }, [iframeRef]);
116 | 
117 |   const click = () => setCount(count + 1);
118 |   return (
119 |     <Fragment>
120 |       <button onClick={click} style={{ display: 'flex' }}>Click</button>
121 |       <IFrame ref={(node) => node && setIframeRef(node)}>
122 |         <div>Hello World!</div>
123 |         <div style={{ fontSize: 32, color: 'red' }}>{count}</div>
124 |       </IFrame>
125 |     </Fragment>
126 |   );
127 | }
128 | ```
129 | 
130 | ## `src`
131 | 
132 | Open a URL in an [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).
133 | 
134 | ```tsx mdx:preview
135 | import React, { useEffect, useState, Fragment } from 'react';
136 | import IFrame from '@uiw/react-iframe';
137 | 
138 | export default function Demo() {
139 |   return (
140 |     <IFrame src="https://wangchujiang.com/" style={{ width: '100%', height: 320 }} />
141 |   );
142 | }
143 | ```
144 | 
145 | ## Accessing the iframe's `window` and `document`
146 | 
147 | The iframe's `window` and `document` may be accessed via the `FrameContext.Consumer` or the useFrame hook.
148 | 
149 | ```tsx mdx:preview
150 | import React, { useEffect, useState, Fragment } from 'react';
151 | import IFrame, { FrameContext } from '@uiw/react-iframe';
152 | 
153 | export default function Demo() {
154 |   return (
155 |     <IFrame>
156 |       <FrameContext.Consumer>
157 |         {({ document, window }) => {
158 |           return (
159 |             <div>
160 |               <div>Hello World!</div>
161 |             </div>
162 |           )
163 |         }}
164 |       </FrameContext.Consumer>
165 |     </IFrame>
166 |   );
167 | }
168 | ```
169 | 
170 | The example with `useFrame` hook:
171 | 
172 | ```tsx mdx:preview
173 | import React, { useEffect, useState, Fragment } from 'react';
174 | import IFrame, { useFrame } from '@uiw/react-iframe';
175 | 
176 | const InnerComponent = () => {
177 |   // Hook returns iframe's window and document instances from Frame context
178 |   const { document, window } = useFrame();
179 |   return (
180 |     <div>
181 |       <div>Hello World!</div>
182 |     </div>
183 |   );
184 | };
185 | 
186 | export default function Demo() {
187 |   return (
188 |     <IFrame>
189 |       <InnerComponent />
190 |     </IFrame>
191 |   );
192 | }
193 | ```
194 | 
195 | ## Event
196 | 
197 | ```tsx mdx:preview
198 | import React, { useEffect, useState, Fragment } from 'react';
199 | import IFrame, { useFrame } from '@uiw/react-iframe';
200 | 
201 | const InnerComponent = () => {
202 |   // Hook returns iframe's window and document instances from Frame context
203 |   const { document, window } = useFrame();
204 |   return (
205 |     <div>
206 |       <div>Hello World!</div>
207 |     </div>
208 |   );
209 | };
210 | 
211 | export default function Demo() {
212 |   const onLoad = (evn) => {
213 |     console.log("iframe loaded successfully!", evn)
214 |   }
215 |   return (
216 |     <IFrame onLoad={onLoad}>
217 |       <InnerComponent />
218 |     </IFrame>
219 |   );
220 | }
221 | ```
222 | 
223 | ## Props
224 | 
225 | ```ts
226 | export interface IFrameProps extends React.HTMLAttributes<HTMLIFrameElement> {
227 |   head?: React.ReactNode;
228 |   initialContent?: string;
229 |   mountTarget?: string;
230 | }
231 | declare const IFrame: import("react").ForwardRefExoticComponent<IFrameProps & import("react").RefAttributes<HTMLIFrameElement>>;
232 | export default IFrame;
233 | ```
234 | 
235 | ## Development
236 | 
237 | Runs the project in development mode.  
238 | 
239 | ```bash
240 | # Step 1, run first, listen to the component compile and output the .js file
241 | # listen for compilation output type .d.ts file
242 | npm run watch
243 | # Step 2, development mode, listen to compile preview website instance
244 | npm run start
245 | ```
246 | 
247 | Builds the app for production to the build folder.
248 | 
249 | ```bash
250 | npm run build
251 | ```
252 | 
253 | The build is minified and the filenames include the hashes.
254 | Your app is ready to be deployed!
255 | 
256 | 
257 | ## Contributors
258 | 
259 | As always, thanks to our amazing contributors!
260 | 
261 | <a href="https://github.com/uiwjs/react-iframe/graphs/contributors">
262 |   <img src="https://uiwjs.github.io/react-iframe/CONTRIBUTORS.svg" />
263 | </a>
264 | 
265 | Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
266 | 
267 | ## License
268 | 
269 | Licensed under the MIT License.


--------------------------------------------------------------------------------
/core/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@uiw/react-iframe",
 3 |   "version": "1.0.4",
 4 |   "description": "This component allows you to wrap your entire React application or each component in an iFrame.",
 5 |   "author": "Kenny Wong <wowohoo@qq.com>",
 6 |   "homepage": "https://uiwjs.github.io/react-iframe",
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "https://github.com/uiwjs/react-iframe.git"
10 |   },
11 |   "license": "MIT",
12 |   "main": "./cjs/index.js",
13 |   "module": "./esm/index.js",
14 |   "files": [
15 |     "dist.css",
16 |     "dist",
17 |     "cjs",
18 |     "esm",
19 |     "src"
20 |   ],
21 |   "publishConfig": {
22 |     "access": "public"
23 |   },
24 |   "keywords": [
25 |     "react-iframe",
26 |     "react.js",
27 |     "react",
28 |     "template",
29 |     "monorepo",
30 |     "monorepo-template",
31 |     "uiw",
32 |     "uiw-react",
33 |     "react-component",
34 |     "component",
35 |     "iframe",
36 |     "components",
37 |     "ui",
38 |     "css",
39 |     "uikit",
40 |     "react-ui",
41 |     "framework"
42 |   ],
43 |   "peerDependencies": {
44 |     "react": ">=16.9.0",
45 |     "react-dom": ">=16.9.0"
46 |   },
47 |   "devDependencies": {
48 |     "@babel/runtime": "^7.18.9",
49 |     "@types/react": "^18.0.17",
50 |     "@types/react-dom": "^18.0.6",
51 |     "@types/react-test-renderer": "^18.0.0",
52 |     "react": "^18.2.0",
53 |     "react-dom": "^18.2.0",
54 |     "react-test-renderer": "^18.2.0"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/core/src/Context.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | let doc;
 4 | let win;
 5 | if (typeof document !== 'undefined') {
 6 |   doc = document;
 7 | }
 8 | if (typeof window !== 'undefined') {
 9 |   win = window;
10 | }
11 | 
12 | export const FrameContext = React.createContext<ContextProps>({ document: doc, window: win });
13 | 
14 | interface ContextProps {
15 |   document?: Document | null;
16 |   window?: Window | null;
17 | }
18 | 
19 | export const useFrame = () => React.useContext<ContextProps>(FrameContext);
20 | 


--------------------------------------------------------------------------------
/core/src/index.tsx:
--------------------------------------------------------------------------------
  1 | import { useCallback, useEffect, useState, forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
  2 | import { createPortal } from 'react-dom';
  3 | import { FrameContext } from './Context';
  4 | 
  5 | export { FrameContext, useFrame } from './Context';
  6 | 
  7 | export interface IFrameProps
  8 |   extends React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement> {
  9 |   /**
 10 |    * The `head` prop is a dom node that gets inserted before the children of the frame.
 11 |    */
 12 |   head?: React.ReactNode;
 13 |   /**
 14 |    * The `initialContent` props is the initial html injected into frame.
 15 |    * It is only injected once,
 16 |    * but allows you to insert any html into the frame (e.g. a [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) tag, [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) tags, etc).
 17 |    * Note that it does not update if you change the prop.
 18 |    *
 19 |    * Defaults to `<!DOCTYPE html><html><head></head><body></body></html>`
 20 |    */
 21 |   initialContent?: string;
 22 |   /**
 23 |    * The `mountTarget` attribute is a css selector (`#target`/`.target`) that specifies the child within the initial content of the iframe to be mounted.
 24 |    */
 25 |   mountTarget?: string;
 26 | }
 27 | 
 28 | const IFrame = forwardRef<HTMLIFrameElement, IFrameProps>(
 29 |   ({ children, head, initialContent, src, mountTarget, ...other }, ref) => {
 30 |     const [iframeLoaded, setIframeLoaded] = useState(false);
 31 |     const [mountNode, setMountNode] = useState<HTMLIFrameElement>();
 32 |     const refContent = (node: HTMLIFrameElement) => {
 33 |       if (node) {
 34 |         setMountNode(node);
 35 |       }
 36 |     };
 37 | 
 38 |     useImperativeHandle(ref, () => mountNode!, [mountNode]);
 39 | 
 40 |     const html = initialContent || `<!DOCTYPE html><html><head></head><body></body></html>`;
 41 |     const getDoc = () => (mountNode ? mountNode.contentDocument : null);
 42 |     const getMountTarget = () => {
 43 |       const doc = getDoc();
 44 |       if (mountTarget) {
 45 |         return doc?.querySelector(mountTarget);
 46 |       }
 47 |       return doc?.body;
 48 |     };
 49 |     const evnRef = useRef<React.SyntheticEvent<HTMLIFrameElement, Event>>();
 50 |     const handleLoad = useCallback<(evn: React.SyntheticEvent<HTMLIFrameElement, Event> | Event) => void>(
 51 |       (evn) => {
 52 |         evnRef.current = evn as React.SyntheticEvent<HTMLIFrameElement, Event>;
 53 |         /**
 54 |          * In certain situations on a cold cache DOMContentLoaded never gets called
 55 |          * fallback to an interval to check if that's the case
 56 |          */
 57 |         const loadCheck = () => setInterval(() => handleLoad(evn), 500);
 58 |         clearInterval(loadCheck());
 59 |         // Bail update as some browsers will trigger on both DOMContentLoaded & onLoad ala firefox
 60 |         if (!iframeLoaded) {
 61 |           setIframeLoaded(true);
 62 |         }
 63 |       },
 64 |       [iframeLoaded],
 65 |     );
 66 | 
 67 |     useMemo(() => {
 68 |       if (!src && other.onLoad && iframeLoaded) {
 69 |         other.onLoad(evnRef.current!);
 70 |       }
 71 |     }, [iframeLoaded]);
 72 | 
 73 |     useEffect(() => {
 74 |       if (mountNode && !src) {
 75 |         mountNode.contentWindow?.addEventListener('DOMContentLoaded', handleLoad);
 76 |       }
 77 |       return () => {
 78 |         if (mountNode && !src) {
 79 |           mountNode.contentWindow?.removeEventListener('DOMContentLoaded', handleLoad);
 80 |         }
 81 |       };
 82 |     }, [mountNode, handleLoad]);
 83 | 
 84 |     const renderFrameContents = () => {
 85 |       const doc = getDoc();
 86 |       const header = getDoc()?.head;
 87 |       const mountTarget = getMountTarget();
 88 |       // @ts-ignore
 89 |       const win = doc?.defaultView || doc?.parentView;
 90 |       const contents = <FrameContext.Provider value={{ document: doc, window: win }}>{children}</FrameContext.Provider>;
 91 |       return [
 92 |         header && head && createPortal(head, header),
 93 |         mountNode && mountTarget && createPortal(contents, mountTarget),
 94 |       ];
 95 |     };
 96 |     const reProps: IFrameProps = {};
 97 |     if (src) {
 98 |       delete reProps.srcDoc;
 99 |       reProps.src = src;
100 |       reProps.onLoad = other.onLoad;
101 |     } else {
102 |       reProps.srcDoc = html;
103 |     }
104 |     return (
105 |       <iframe title={other.title} ref={refContent} {...other} onLoad={handleLoad} {...reProps}>
106 |         {iframeLoaded && renderFrameContents()}
107 |       </iframe>
108 |     );
109 |   },
110 | );
111 | 
112 | IFrame.displayName = 'IFrame';
113 | 
114 | export default IFrame;
115 | 


--------------------------------------------------------------------------------
/core/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig",
 3 |   "include": ["src"],
 4 |   "compilerOptions": {
 5 |     "outDir": "./cjs",
 6 |     "baseUrl": ".",
 7 |     "noEmit": false
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 |   "version": "1.0.4",
3 |   "packages": ["website", "core"]
4 | }
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "⬇️⬇️⬇️⬇️⬇️ package ⬇️⬇️⬇️⬇️⬇️": "▼▼▼▼▼ package ▼▼▼▼▼",
 5 |     "build": "lerna exec --scope @uiw/* -- tsbb build src/*.tsx --use-babel --cjs cjs --bail",
 6 |     "watch": "lerna exec \"tsbb watch src/*.tsx --use-babel --cjs cjs\" --scope @uiw/*",
 7 |     "⬆️⬆️⬆️⬆️⬆️ package ⬆️⬆️⬆️⬆️⬆️": "▲▲▲▲▲ package ▲▲▲▲▲",
 8 |     "start": "lerna exec --scope website -- npm run start",
 9 |     "doc": "lerna exec --scope website -- npm run build",
10 |     "bootstrap": "lerna bootstrap",
11 |     "hoist": "lerna bootstrap --hoist",
12 |     "test": "tsbb test --env=jsdom",
13 |     "coverage": "tsbb test --env=jsdom --coverage --bail",
14 |     "prepare": "husky install",
15 |     "version": "lerna version --exact --force-publish --no-push --no-git-tag-version",
16 |     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
17 |     "remove": "npm run clean && lerna exec \"rm -rf package-lock.json\" --scope @uiw/* --scope website",
18 |     "clean": "lerna clean --yes"
19 |   },
20 |   "lint-staged": {
21 |     "*.{js,jsx,ts,tsx,less,md,json}": [
22 |       "prettier --write"
23 |     ]
24 |   },
25 |   "jest": {
26 |     "collectCoverageFrom": [
27 |       "<rootDir>/core/src/**/*.{js,jsx,ts,tsx}"
28 |     ],
29 |     "testMatch": [
30 |       "<rootDir>/test/*.{ts,tsx}"
31 |     ],
32 |     "transformIgnorePatterns": [
33 |       "<rootDir>/node_modules/?!(.*)"
34 |     ]
35 |   },
36 |   "workspaces": [
37 |     "website",
38 |     "core"
39 |   ],
40 |   "engines": {
41 |     "node": ">=16.0.0"
42 |   },
43 |   "devDependencies": {
44 |     "@kkt/less-modules": "^7.5.2",
45 |     "@kkt/ncc": "^1.0.15",
46 |     "@testing-library/react": "^14.0.0",
47 |     "@testing-library/user-event": "^14.4.3",
48 |     "husky": "^8.0.1",
49 |     "jest": "^29.6.4",
50 |     "jest-environment-jsdom": "^29.6.0",
51 |     "jest-environment-node": "^29.6.0",
52 |     "jest-watch-typeahead": "^2.2.2",
53 |     "lerna": "^8.0.0",
54 |     "lint-staged": "^14.0.0",
55 |     "prettier": "^3.0.1",
56 |     "tsbb": "^4.5.1"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
 3 |   "extends": ["config:base"],
 4 |   "packageRules": [
 5 |     {
 6 |       "matchPackagePatterns": ["*"],
 7 |       "rangeStrategy": "replace"
 8 |     }
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/test/index.test.tsx:
--------------------------------------------------------------------------------
 1 | import renderer from 'react-test-renderer';
 2 | import { render, waitFor, renderHook, act } from '@testing-library/react';
 3 | import IFrame, { useFrame, FrameContext } from '../core/src';
 4 | import React from 'react';
 5 | 
 6 | it('renders <IFrame /> test case', () => {
 7 |   const component = renderer.create(
 8 |     <IFrame />,
 9 |   );
10 |   const tree = component.toJSON();
11 |   expect(!!tree).toBeTruthy();
12 |   expect(tree).toHaveProperty('type', 'iframe');
13 |   expect(tree).toHaveProperty('props');
14 |   expect(tree).toHaveProperty('children');
15 |   expect(tree).toHaveProperty('props.title', undefined);
16 |   expect(tree).toHaveProperty('props.srcDoc', '<!DOCTYPE html><html><head></head><body></body></html>');
17 | });
18 | 
19 | it('renders <IFrame /> test case', async () => {
20 |   const { container } = render(
21 |     <IFrame>
22 |       <h1>Hello World!</h1>
23 |     </IFrame>
24 |   );
25 |   await waitFor(() => {
26 |     expect(container.innerHTML).toEqual(`<iframe srcdoc="<!DOCTYPE html><html><head></head><body></body></html>"></iframe>`);
27 |   })
28 | });
29 | 
30 | it('renders useFrame test case', async () => {
31 |   const { result } = renderHook(() => useFrame());
32 |   act(() => {
33 |     expect(Object.keys(result.current)).toEqual(["document", "window"]);
34 |   });
35 | });
36 | 
37 | 
38 | it('renders ref test case', async () => {
39 |   const ref = React.createRef<HTMLIFrameElement>();
40 |   const { container } = render(
41 |     <IFrame ref={ref}>
42 |       <h1>Hello World!</h1>
43 |     </IFrame>
44 |   );
45 |   await waitFor(() => {
46 |     expect(ref.current instanceof HTMLIFrameElement).toBeTruthy();
47 |     expect(container.innerHTML).toEqual(`<iframe srcdoc="<!DOCTYPE html><html><head></head><body></body></html>"></iframe>`);
48 |   })
49 | });
50 | 
51 | 
52 | it('renders <IFrame src="https://wangchujiang.com/" /> test case', async () => {
53 |   const { container } = render(
54 |     <IFrame src="https://wangchujiang.com/">
55 |       <h1>Hello World!</h1>
56 |     </IFrame>
57 |   );
58 |   await waitFor(() => {
59 |     expect(container.innerHTML).toEqual(`<iframe src="https://wangchujiang.com/"></iframe>`);
60 |   })
61 | });
62 | 
63 | 
64 | it('renders <IFrame head="..." /> test case', async () => {
65 |   const head = (
66 |     <style>{`body { background: red; }`}</style>
67 |   );
68 |   const ref = React.createRef<HTMLIFrameElement>();
69 |   const { container } = render(
70 |     <IFrame ref={ref} head={head}>
71 |       <FrameContext.Consumer>
72 |         {({ document, window }) => {
73 |           return (
74 |             <div>
75 |               <div>Hello World!</div>
76 |             </div>
77 |           )
78 |         }}
79 |       </FrameContext.Consumer>
80 |     </IFrame>
81 |   );
82 |   await waitFor(() => {
83 |     expect(container.innerHTML).toEqual(`<iframe srcdoc="<!DOCTYPE html><html><head></head><body></body></html>"></iframe>`);
84 |   });
85 | });
86 | 
87 | it('renders <IFrame mountTarget="..." /> test case', async () => {
88 |   const initialContent = '<!DOCTYPE html><html><head></head><body><h1>i wont be changed</h1><div id="mountHere"></div></body></html>';
89 |   const { container } = render(
90 |     <IFrame initialContent={initialContent} mountTarget="#mountHere">
91 |       <div style={{ fontSize: 32, color: 'red' }}>Hello World!</div>
92 |     </IFrame>
93 |   );
94 |   await waitFor(() => {
95 |     expect(container.innerHTML).toEqual(`<iframe srcdoc=\"<!DOCTYPE html><html><head></head><body><h1>i wont be changed</h1><div id=&quot;mountHere&quot;></div></body></html>\"></iframe>`);
96 |   });
97 | });
98 | 
99 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "jsx": "react-jsx",
 4 |     "target": "esnext",
 5 |     "lib": ["dom", "dom.iterable", "esnext"],
 6 |     "allowJs": true,
 7 |     "skipLibCheck": true,
 8 |     "esModuleInterop": true,
 9 |     "allowSyntheticDefaultImports": true,
10 |     "strict": true,
11 |     "forceConsistentCasingInFileNames": true,
12 |     "module": "esnext",
13 |     "moduleResolution": "node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "declaration": true,
17 |     "baseUrl": ".",
18 |     "noFallthroughCasesInSwitch": true,
19 |     "noEmit": true
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/website/.kktrc.ts:
--------------------------------------------------------------------------------
 1 | import webpack from 'webpack';
 2 | import { WebpackConfiguration, LoaderConfOptions } from 'kkt';
 3 | import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
 4 | import pkg from './package.json';
 5 | 
 6 | export default (conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions) => {
 7 |   conf = mdCodeModulesLoader(conf);
 8 |   conf.plugins!.push(
 9 |     new webpack.DefinePlugin({
10 |       VERSION: JSON.stringify(pkg.version),
11 |     }),
12 |   );
13 | 
14 |   conf.module!.exprContextCritical = false;
15 |   if (env === 'production') {
16 |     conf.output = { ...conf.output, publicPath: './' };
17 |     conf.optimization = {
18 |       ...conf.optimization,
19 |       splitChunks: {
20 |         cacheGroups: {
21 |           reactvendor: {
22 |             test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
23 |             name: 'react-vendor',
24 |             chunks: 'all',
25 |           },
26 |           refractor: {
27 |             test: /[\\/]node_modules[\\/](refractor)[\\/]/,
28 |             name: 'refractor-prismjs-vendor',
29 |             chunks: 'all',
30 |           },
31 |         },
32 |       },
33 |     };
34 |   }
35 | 
36 |   return conf;
37 | };
38 | 


--------------------------------------------------------------------------------
/website/README.md:
--------------------------------------------------------------------------------
1 | Document Website
2 | ===
3 | 
4 | https://uiwjs.github.io/react-monorepo-template


--------------------------------------------------------------------------------
/website/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "website",
 3 |   "version": "1.0.4",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "start": "kkt start",
 7 |     "build": "kkt build"
 8 |   },
 9 |   "license": "MIT",
10 |   "dependencies": {
11 |     "@uiw/react-iframe": "1.0.4",
12 |     "@uiw/react-markdown-preview-example": "^1.5.3",
13 |     "react": "^18.2.0",
14 |     "react-dom": "^18.2.0"
15 |   },
16 |   "devDependencies": {
17 |     "@types/react": "^18.0.17",
18 |     "@types/react-dom": "^18.0.6",
19 |     "kkt": "^7.4.9",
20 |     "markdown-react-code-preview-loader": "^2.1.2"
21 |   },
22 |   "eslintConfig": {
23 |     "extends": [
24 |       "react-app",
25 |       "react-app/jest"
26 |     ]
27 |   },
28 |   "browserslist": {
29 |     "production": [
30 |       ">0.2%",
31 |       "not dead",
32 |       "not op_mini all"
33 |     ],
34 |     "development": [
35 |       "last 1 chrome version",
36 |       "last 1 firefox version",
37 |       "last 1 safari version"
38 |     ]
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/website/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uiwjs/react-iframe/d77521b7ab85aee50b712d43471a2541e1a21404/website/public/favicon.ico


--------------------------------------------------------------------------------
/website/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
 6 |     <meta name="theme-color" content="#000000" />
 7 |     <title>react-iframe</title>
 8 |     <meta name="keywords" content="react-iframe,react.js,react,template,monorepo,monorepo-template,uiw,uiw-react,react-component,component,iframe,components,ui,css,uikit,react-ui" />
 9 |     <meta name="description" content="This component allows you to wrap your entire React application or each component in an iFrame." />
10 |     <link rel="icon" href="%PUBLIC_URL%favicon.ico" />
11 |     <!-- <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦖</text></svg>"> -->
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |     <!--
17 |       This HTML file is a template.
18 |       If you open it directly in the browser, you will see an empty page.
19 |       You can add webfonts, meta tags, or analytics to this file.
20 |       The build step will place the bundled scripts into the <body> tag.
21 |       To begin the development, run `npm start` or `yarn start`.
22 |       To create a production bundle, use `npm run build` or `yarn build`.
23 |     -->
24 |   </body>
25 | </html>


--------------------------------------------------------------------------------
/website/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import { createRoot } from 'react-dom/client';
 2 | import MarkdownPreviewExample from '@uiw/react-markdown-preview-example';
 3 | import pkg from '@uiw/react-iframe/package.json';
 4 | import data from '@uiw/react-iframe/README.md';
 5 | 
 6 | const Github = MarkdownPreviewExample.Github;
 7 | 
 8 | const container = document.getElementById('root');
 9 | const root = createRoot(container!);
10 | root.render(
11 |   <MarkdownPreviewExample
12 |     source={data.source}
13 |     components={data.components}
14 |     data={data.data}
15 |     title={pkg.name}
16 |     description={pkg.description}
17 |     version={`v${VERSION}`}
18 |   >
19 |     <Github href={pkg.repository.url} />
20 |   </MarkdownPreviewExample>,
21 | );
22 | 


--------------------------------------------------------------------------------
/website/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="react-scripts" />
 2 | 
 3 | declare module '*.less' {
 4 |   const classes: { readonly [key: string]: string };
 5 |   export default classes;
 6 | }
 7 | 
 8 | declare var VERSION: string;
 9 | 
10 | declare module '*.md' {
11 |   import { CodeBlockData } from 'markdown-react-code-preview-loader';
12 |   const src: CodeBlockData;
13 |   export default src;
14 | }
15 | 


--------------------------------------------------------------------------------
/website/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig",
 3 |   "include": [".kktrc.ts", "src"],
 4 |   "compilerOptions": {
 5 |     "jsx": "react-jsx",
 6 |     "baseUrl": "./src",
 7 |     "noEmit": true
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------