Skip to content

Commit

Permalink
rename static prop to copy prop
Browse files Browse the repository at this point in the history
  • Loading branch information
Brian Kim committed Feb 14, 2024
1 parent cc5a08d commit 2e556d9
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 33 deletions.
27 changes: 14 additions & 13 deletions src/crank.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,8 +227,8 @@ export class Element<TTag extends Tag = Tag> {
return this.props.ref;
}

get static_(): boolean {
return !!this.props["static"];
get copy(): boolean {
return !!this.props.copy;
}
}

Expand All @@ -241,11 +241,11 @@ export function isElement(value: any): value is Element {

const DEPRECATED_PROP_PREFIXES = ["crank-", "c-", "$"];

const SPECIAL_PROP_BASES = ["key", "ref", "static"];
const DEPRECATED_SPECIAL_PROP_BASES = ["key", "ref", "static"];

const SPECIAL_PROPS = new Set(["children", ...SPECIAL_PROP_BASES]);
const SPECIAL_PROPS = new Set(["children", "key", "ref", "copy"]);
for (const propPrefix of DEPRECATED_PROP_PREFIXES) {
for (const propBase of SPECIAL_PROP_BASES) {
for (const propBase of DEPRECATED_SPECIAL_PROP_BASES) {
SPECIAL_PROPS.add(propPrefix + propBase);
}
}
Expand All @@ -269,14 +269,15 @@ export function createElement<TTag extends Tag>(

for (let i = 0; i < DEPRECATED_PROP_PREFIXES.length; i++) {
const propPrefix = DEPRECATED_PROP_PREFIXES[i];
for (let j = 0; j < SPECIAL_PROP_BASES.length; j++) {
const propBase = SPECIAL_PROP_BASES[j];
for (let j = 0; j < DEPRECATED_SPECIAL_PROP_BASES.length; j++) {
const propBase = DEPRECATED_SPECIAL_PROP_BASES[j];
const deprecatedPropName = propPrefix + propBase;
const targetPropBase = propBase === "static" ? "copy" : propBase;
if (deprecatedPropName in (props as TagProps<TTag>)) {
console.warn(
`The \`${deprecatedPropName}\` prop is deprecated. Use \`${propBase}\` instead.`,
`The \`${deprecatedPropName}\` prop is deprecated. Use \`${targetPropBase}\` instead.`,
);
(props as TagProps<TTag>)[propBase] = (props as TagProps<TTag>)[
(props as TagProps<TTag>)[targetPropBase] = (props as TagProps<TTag>)[
deprecatedPropName
];
}
Expand Down Expand Up @@ -880,13 +881,13 @@ function diffChildren<TNode, TScope, TRoot extends TNode, TResult>(
value = getInflightValue(ret);
} else {
let oldProps: Record<string, any> | undefined;
let static_ = false;
let copy = false;
if (typeof ret === "object" && ret.el.tag === child.tag) {
oldProps = ret.el.props;
ret.el = child;
if (child.static_) {
if (child.copy) {
value = getInflightValue(ret);
static_ = true;
copy = true;
}
} else {
if (typeof ret === "object") {
Expand All @@ -898,7 +899,7 @@ function diffChildren<TNode, TScope, TRoot extends TNode, TResult>(
ret.fallbackValue = fallback;
}

if (static_) {
if (copy) {
// pass
} else if (child.tag === Raw) {
value = hydrationBlock
Expand Down
2 changes: 1 addition & 1 deletion test/copy.tsx → test/copy-el.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import * as Sinon from "sinon";
import {Context, Copy, createElement, Element, Fragment} from "../src/crank.js";
import {renderer} from "../src/dom.js";

const test = suite("copy");
const test = suite("copy-el");

test.after.each(() => {
document.body.innerHTML = "";
Expand Down
38 changes: 19 additions & 19 deletions test/static.tsx → test/copy-prop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@ import * as Assert from "uvu/assert";
import {createElement, Context} from "../src/crank.js";
import {renderer} from "../src/dom.js";

const test = suite("static");
const test = suite("copy-prop");

test.after.each(() => {
renderer.render(null, document.body);
document.body.innerHTML = "";
});

test("host", () => {
renderer.render(<div static={true}>Hello world</div>, document.body);
renderer.render(<div copy={true}>Hello world</div>, document.body);

Assert.is(document.body.innerHTML, "<div>Hello world</div>");

renderer.render(
<div static={true} style="background-color: red">
<div copy={true} style="background-color: red">
Hello again
</div>,
document.body,
Expand All @@ -30,15 +30,15 @@ test("component", () => {
return <div>Hello {name}</div>;
}

renderer.render(<Greeting static={true} name="world" />, document.body);
renderer.render(<Greeting copy={true} name="world" />, document.body);

Assert.is(document.body.innerHTML, "<div>Hello world</div>");

renderer.render(<Greeting static={true} name="Alice" />, document.body);
renderer.render(<Greeting copy={true} name="Alice" />, document.body);

Assert.is(document.body.innerHTML, "<div>Hello world</div>");

renderer.render(<Greeting static={false} name="Bob" />, document.body);
renderer.render(<Greeting copy={false} name="Bob" />, document.body);

Assert.is(document.body.innerHTML, "<div>Hello Bob</div>");
});
Expand All @@ -50,11 +50,11 @@ test("component refresh", () => {
return <div>Hello {name}</div>;
}

renderer.render(<Greeting static={true} name="world" />, document.body);
renderer.render(<Greeting copy={true} name="world" />, document.body);

Assert.is(document.body.innerHTML, "<div>Hello world</div>");

renderer.render(<Greeting static={true} name="Alice" />, document.body);
renderer.render(<Greeting copy={true} name="Alice" />, document.body);

Assert.is(document.body.innerHTML, "<div>Hello world</div>");

Expand All @@ -68,11 +68,11 @@ test("async component", async () => {
return <div>Hello {name}</div>;
}

await renderer.render(<Greeting static={true} name="world" />, document.body);
await renderer.render(<Greeting copy={true} name="world" />, document.body);

Assert.is(document.body.innerHTML, "<div>Hello world</div>");
const p1 = renderer.render(
<Greeting static={true} name="Alice" />,
<Greeting copy={true} name="Alice" />,
document.body,
);

Expand All @@ -81,7 +81,7 @@ test("async component", async () => {
Assert.is(document.body.innerHTML, "<div>Hello world</div>");

const p2 = renderer.render(
<Greeting static={false} name="Bob" />,
<Greeting copy={false} name="Bob" />,
document.body,
);

Expand All @@ -98,11 +98,11 @@ test("async component refresh", async () => {
return <div>Hello {name}</div>;
}

await renderer.render(<Greeting static={true} name="world" />, document.body);
await renderer.render(<Greeting copy={true} name="world" />, document.body);

Assert.is(document.body.innerHTML, "<div>Hello world</div>");
const p1 = renderer.render(
<Greeting static={true} name="Alice" />,
<Greeting copy={true} name="Alice" />,
document.body,
);

Expand All @@ -126,7 +126,7 @@ test("inflight", async () => {
const p1 = renderer.render(<Greeting name="world" />, document.body);

const p2 = renderer.render(
<Greeting static={true} name="Alice" />,
<Greeting copy={true} name="Alice" />,
document.body,
);

Expand Down Expand Up @@ -157,11 +157,11 @@ test("generator component", async () => {
}
}

renderer.render(<Greeting static={true} name="world" />, document.body);
renderer.render(<Greeting copy={true} name="world" />, document.body);

Assert.is(document.body.innerHTML, "<div>Hello world 0</div>");

renderer.render(<Greeting static={true} name="Alice" />, document.body);
renderer.render(<Greeting copy={true} name="Alice" />, document.body);

Assert.is(document.body.innerHTML, "<div>Hello world 0</div>");

Expand All @@ -172,7 +172,7 @@ test("generator component", async () => {
test("isolate higher-order component", () => {
function isolate(Component: any) {
return function Wrapper(props: any) {
return <Component {...props} static={true} />;
return <Component {...props} copy={true} />;
};
}

Expand Down Expand Up @@ -205,8 +205,8 @@ test("isolate higher-order component", () => {
});

test("tag change", () => {
renderer.render(<div static={true}>Hello world</div>, document.body);
renderer.render(<span static={true}>Hello world</span>, document.body);
renderer.render(<div copy={true}>Hello world</div>, document.body);
renderer.render(<span copy={true}>Hello world</span>, document.body);
Assert.is(document.body.innerHTML, "<span>Hello world</span>");
});

Expand Down

0 comments on commit 2e556d9

Please sign in to comment.