Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit4d751e1

Browse files
committed
feat(props): implement props & attrs
1 parente099123 commit4d751e1

File tree

8 files changed

+92
-46
lines changed

8 files changed

+92
-46
lines changed
Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
/* eslint-disable @typescript-eslint/ban-types */
12
import{FunctionComponent,ReactElement}from'react';
2-
import{UseIframeOptions,UseWebComponentsOptions,UseAppOptions}from'fronts';
3+
import{
4+
UseIframeOptions,
5+
UseWebComponentsOptions,
6+
UseAppOptions,
7+
}from'fronts';
38

49
exporttypeAppWrapper<T>=FunctionComponent<
510
{
@@ -13,13 +18,12 @@ export type IframeWrapper<T> = FunctionComponent<
1318
}&T
1419
>;
1520

16-
exporttypeUseApp=<TextendsRecord<string,any>=Record<string,any>>(
17-
options:Pick<UseAppOptions,Exclude<keyofUseAppOptions,'target'>>
18-
)=>AppWrapper<T>;
19-
20-
exporttypeUseIframe=<TextendsRecord<string,any>=Record<string,any>>(
21-
options:Pick<UseIframeOptions,Exclude<keyofUseIframeOptions,'target'>>
22-
)=>FunctionComponent<T>;
21+
exporttypeUseApp=<T={},P={}>(
22+
options:Pick<
23+
UseAppOptions<T,P>,
24+
Exclude<keyofUseAppOptions<T,P>,'target'>
25+
>
26+
)=>AppWrapper<{}>;
2327

2428
exporttypeUseWebComponents=<
2529
TextendsRecord<string,any>=Record<string,any>
@@ -28,4 +32,11 @@ export type UseWebComponents = <
2832
UseWebComponentsOptions,
2933
Exclude<keyofUseWebComponentsOptions,'target'>
3034
>
31-
)=>AppWrapper<T>;
35+
)=>AppWrapper<{}>;
36+
37+
exporttypeUseIframe=<T={}>(
38+
options:Pick<
39+
UseIframeOptions<T>,
40+
Exclude<keyofUseIframeOptions<T>,'target'>
41+
>
42+
)=>FunctionComponent;

‎packages/fronts-react/src/useApp.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable @typescript-eslint/ban-types */
12
importReact,{useEffect,useRef,useState,useCallback,memo}from'react';
23
import{injectStyle,loadApp,Render,unmount}from'fronts';
34
import{AppWrapper,UseApp}from'./interface';
@@ -14,8 +15,8 @@ export const useApp: UseApp = (options) => {
1415
ModuleRef.current=module;
1516
});
1617
},[]);
17-
constApp:AppWrapper<any>=useCallback(
18-
memo((props)=>{
18+
constApp:AppWrapper<{}>=useCallback(
19+
memo(()=>{
1920
constrootRef=useRef<HTMLDivElement>(null);
2021
constrenderRef=useRef<HTMLDivElement>(null);
2122
useEffect(()=>{
@@ -27,8 +28,10 @@ export const useApp: UseApp = (options) => {
2728
letcallback:void|(()=>void);
2829
Promise.resolve().then(()=>{
2930
injectStyle(rootRef.current!,options.name);
30-
// TODO: pass `props`
31-
callback=ModuleRef!.current!.default(renderRef.current);
31+
callback=ModuleRef!.current!.default(
32+
renderRef.current,
33+
options.props??{}
34+
);
3235
});
3336
return()=>{
3437
unmount(rootRef.current!,options.name);
@@ -40,7 +43,7 @@ export const useApp: UseApp = (options) => {
4043
ref={rootRef}
4144
data-fronts={options?.name}
4245
data-render={Date.now()}
43-
{...props}
46+
{...options.attrs}
4447
>
4548
<divref={renderRef}></div>
4649
</div>

‎packages/fronts-react/src/useIframe.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@ import React, { memo, useCallback, useEffect, useState } from 'react';
22
import{getIframeUrl}from'fronts';
33
import{UseIframe}from'./interface';
44

5-
// TODO: pass `props`
65
/**
76
*
87
*/
9-
exportconstuseIframe:UseIframe=({ name, url=''})=>{
8+
exportconstuseIframe:UseIframe=({ name, url='', attrs={}})=>{
109
constIframe=useCallback(
11-
memo((props)=>{
10+
memo(()=>{
1211
const[iframeUrl,setIframeUrl]=useState(url);
1312
if(__DEV__){
14-
if(Object.hasOwnProperty.call(props,'src')){
13+
if(Object.hasOwnProperty.call(attrs,'src')){
1514
console.warn(
1615
`The iframe component of the site named "${name}" does not pass "src" props.`
1716
);
@@ -25,7 +24,7 @@ export const useIframe: UseIframe = ({ name, url = '' }) => {
2524
},[]);
2625
constuid=Math.random().toString(36).slice(2,-1);
2726
returniframeUrl ?(
28-
<iframeframeBorder="no"{...props}src={iframeUrl}data-fronts={uid}/>
27+
<iframeframeBorder="no"{...attrs}src={iframeUrl}data-fronts={uid}/>
2928
) :null;
3029
}),
3130
[name]

‎packages/fronts-react/src/useWebComponents.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable @typescript-eslint/ban-types */
12
importReact,{useEffect,useRef,useState,useCallback,memo}from'react';
23
import{
34
loadApp,
@@ -9,7 +10,6 @@ import {
910
}from'fronts';
1011
import{AppWrapper,UseWebComponents}from'./interface';
1112

12-
// TODO: fix event with `react-shadow-dom-retarget-events`
1313
/**
1414
*
1515
*/
@@ -22,8 +22,8 @@ export const useWebComponents: UseWebComponents = (options) => {
2222
ModuleRef.current=module;
2323
});
2424
},[]);
25-
constApp:AppWrapper<any>=useCallback(
26-
memo((props)=>{
25+
constApp:AppWrapper<{}>=useCallback(
26+
memo(()=>{
2727
useEffect(()=>{
2828
if(typeofModuleRef!.current!.default!=='function'){
2929
thrownewError(
@@ -34,8 +34,11 @@ export const useWebComponents: UseWebComponents = (options) => {
3434
letcallback:void|(()=>void);
3535
Promise.resolve().then(()=>{
3636
injectStyle(injectedRoot,options.name);
37-
// TODO: pass `props`
38-
callback=ModuleRef!.current!.default(node);
37+
constattributes:Record<string,any>=options.attrs??{};
38+
for(constkeyinattributes){
39+
node.setAttribute(key,attributes[key]);
40+
}
41+
callback=ModuleRef!.current!.default(node,options.props??{});
3942
if(options.retargetEvent){
4043
retargetEvents(injectedRoot);
4144
}
@@ -45,7 +48,7 @@ export const useWebComponents: UseWebComponents = (options) => {
4548
callback&&callback();
4649
};
4750
},[]);
48-
return<fronts-app{...props}/>;
51+
return<fronts-app/>;
4952
}),
5053
[loaded]
5154
);

‎packages/fronts/src/interface.ts‎

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1+
/* eslint-disable @typescript-eslint/ban-types */
12
exporttypeNodeElement=HTMLElement|null;
23

3-
exporttypeRender=(target:NodeElement)=>()=>void;
4+
exporttypeRender<P={}>=(target:NodeElement,props?:P)=>()=>void;
45

5-
exporttypeDynamicImport=(
6+
exporttypeDynamicImport<T={}>=(
67
name:string
78
)=>Promise<{
8-
default:Render;
9+
default:Render<T>;
910
}>;
1011

1112
exporttypeRegistryResponse=Record<string,string>;
@@ -15,7 +16,7 @@ export interface CacheContainer {
1516
setItem(key:string,value:string):Promise<void>|void;
1617
}
1718

18-
exportinterfaceUseAppOptions{
19+
exportinterfaceUseAppOptions<T={},P={}>{
1920
/**
2021
*
2122
*/
@@ -28,9 +29,17 @@ export interface UseAppOptions {
2829
*
2930
*/
3031
loader:DynamicImport;
32+
/**
33+
*
34+
*/
35+
attrs?:T;
36+
/**
37+
*
38+
*/
39+
props?:P;
3140
}
3241

33-
exportinterfaceUseIframeOptions{
42+
exportinterfaceUseIframeOptions<T={}>{
3443
/**
3544
*
3645
*/
@@ -43,9 +52,13 @@ export interface UseIframeOptions {
4352
*
4453
*/
4554
url?:string;
55+
/**
56+
*
57+
*/
58+
attrs?:T;
4659
}
4760

48-
exportinterfaceUseWebComponentsOptions{
61+
exportinterfaceUseWebComponentsOptions<T={},P={}>{
4962
/**
5063
*
5164
*/
@@ -69,17 +82,27 @@ export interface UseWebComponentsOptions {
6982
/**
7083
*
7184
*/
72-
retargetEvent?:boolean;
85+
retargetEvent?:boolean;
86+
/**
87+
*
88+
*/
89+
attrs?:T;
90+
/**
91+
*
92+
*/
93+
props?:P;
7394
}
7495

75-
exporttypeUseApp=(options:UseAppOptions)=>Promise<void|(()=>void)>;
76-
77-
exporttypeUseIframe=(options:UseIframeOptions)=>void;// TODO: fix type with iframe Attributes
96+
exporttypeUseApp=<T={},P={}>(
97+
options:UseAppOptions<T,P>
98+
)=>Promise<void|(()=>void)>;
7899

79-
exporttypeUseWebComponents=(
80-
options:UseWebComponentsOptions
100+
exporttypeUseWebComponents=<T={},P={}>(
101+
options:UseWebComponentsOptions<T,P>
81102
)=>Promise<void|(()=>void)>;
82103

104+
exporttypeUseIframe=<T={}>(options:UseIframeOptions<T>)=>void;
105+
83106
exporttypeDefineCustomElementOptions=Pick<
84107
UseWebComponentsOptions,
85108
Exclude<keyofUseWebComponentsOptions,'target'|'loader'>

‎packages/fronts/src/useApp.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,15 @@ export const useApp: UseApp = (options) => {
2121
constrootNode=document.createElement('div');
2222
rootNode.setAttribute('data-fronts',options.name??'undefined');
2323
rootNode.setAttribute('data-time',Date.now().toString());
24+
constattributes:Record<string,any>=options.attrs??{};
25+
for(constkeyinattributes){
26+
rootNode.setAttribute(key,attributes[key]);
27+
}
2428
options.target.appendChild(rootNode);
2529
injectStyle(rootNode,options.name);
2630
constrenderNode=document.createElement('div');
2731
rootNode.appendChild(renderNode);
28-
// TODO: pass `props`
29-
constcallback=module.default(renderNode);
32+
constcallback=module.default(renderNode,options.props??{});
3033
return()=>{
3134
unmount(rootNode,options.name);
3235
callback&&callback();

‎packages/fronts/src/useIframe.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,15 @@ export const getIframeUrl = async (siteName: string) => {
3232
returnurl;
3333
};
3434

35-
exportconstuseIframe:UseIframe=async({ target, name, url})=>{
35+
exportconstuseIframe:UseIframe=async({ target, name, url, attrs})=>{
3636
constiframe=document.createElement('iframe');
3737
iframe.src=url??(awaitgetIframeUrl(name));
3838
constuid=Math.random().toString(36).slice(2,-1);
39+
iframe.setAttribute('frameBorder','no');
40+
constattributes:Record<string,any>=attrs??{};
41+
for(constkeyinattributes){
42+
iframe.setAttribute(key,attributes[key]);
43+
}
3944
iframe.setAttribute('data-fronts',uid);
40-
// iframe.setAttribute('frameBorder', 'no');
41-
// for (const key in options) {
42-
// iframe.setAttribute(key, options[key]);
43-
// }
4445
target?.appendChild(iframe);
4546
};

‎packages/fronts/src/useWebComponents.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,11 @@ export const useWebComponents: UseWebComponents = (options) => {
5959
name:options.name,
6060
});
6161
injectStyle(injectedRoot,options.name);
62-
// TODO: pass `props`
63-
constcallback=module.default(node);
62+
constattributes:Record<string,any>=options.attrs??{};
63+
for(constkeyinattributes){
64+
node.setAttribute(key,attributes[key]);
65+
}
66+
constcallback=module.default(node,options.props??{});
6467
if(options.retargetEvent){
6568
retargetEvents(injectedRoot);
6669
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp