Here's a glimpse of how software engineering is going to look soon.
I wanted to spend more time with my newborn daughter and less time sitting in a terminal watching an AI type. So I built kipppunkt/build. Today I'm sharing it.
github.com/kipppunkt/bu...
![Code snippet with the following code:
// my lib:
type InitData = { prop1: string, prop2: number };
const MyWrapper = ({ children }: ReactElement<InitData>) => {
const [initData] = fetchInitData();
// inject the prop into the children
const slots = React.cloneElement(children, { initData });
return (
<>
{/* ... */}
{slots}
</>
);
};
// user repo:
const UserDefinedChildComponent = (props: InitData) => {
const { prop1, prop2 } = props; // use injected props
return (
<ul>
<li>{prop1}</li>
<li>{prop2}</li>
</ul>
);
};
const UserDefinedParentComponent = () => (
<MyWrapper>
<UserDefinedChildComponent />
</MyWrapper>
);](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:rxz3y4wyodom6g6n3zsp7r4g/bafkreiczznugxaeg5s3meoai7ld25ojwngxhowteeyi5cqd44ypecjrabu)
![Code snippet with the following code:
// my lib:
const MyWrapper = ({ children }) => {
const [initData] = fetchInitData();
return (
<MyWrapperContext.Provider value={initData}>
{children}
</MyWrapperContext.Provider>
);
};
// user repo:
const UserDefinedChildComponent = () => {
const initData = useContext(MyWrapperContext); // data from context
return <>{/* ... */}</>;
};
const UserDefinedParentComponent = () => (
<MyWrapper>
<UserDefinedChildComponent />
</MyWrapper>
);](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:rxz3y4wyodom6g6n3zsp7r4g/bafkreidlxmgsw5hfvw6u5pevdaqvtmtsqgumkgfgazqumtr77sjv47l75y)
![Code snippet with the following code:
const UserDefinedParentComponent = () => {
const [initData, setInitData] = useState();
return (
<MyWrapper onInit={setInitData}> {/* use a callback */}
<UserDefinedChildComponent initData={initData} />
</MyWrapper>
);
};](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:rxz3y4wyodom6g6n3zsp7r4g/bafkreicybcv3g4ifqjyezcodhwq5jxdvjdqwferi66feylncf7hhnygzle)
![Code snippet with the following code:
```
import { Effect } from "effect";
export function deletePostWithEffect(id: Post["id"]): Effect<never, Error | unknown, void> {
return Effect.gen(function* (_) {
const { user } = yield* _(Effect.promise(() => getCurrentSession()));
if (!user) {
yield* _(Effect.fail(new Error("You are not authorized to delete this post")));
}
yield* _(
Effect.promise(() =>
db.delete(postTable).where(eq(postTable.id, id))
)
);
});
}
```](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:rxz3y4wyodom6g6n3zsp7r4g/bafkreih2l5h7pafctohjvhccid22eukagvl57ius2m5og7vkofvgzhicnu)
![Screenshot from the file DOMPropertyOperations.js in the react-dom-bindings package of the react repository on Github with the following code highlighted:
```
if (name[0] === 'o' && name[1] === 'n') {
const useCapture = name.endsWith('Capture');
const eventName = name.slice(2, useCapture ? name.length - 7 : undefined);
```](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:rxz3y4wyodom6g6n3zsp7r4g/bafkreid3gjnwqqabfttk5mde5wl4wwrcziq25z7amqy6zrawbfypzfczey)
