Hi @Ronen_Babayoff,
The code sharing means that you can import from files that are outside of the block’s directory (this was not possible with the previous CLI). There is no specific setup required, it should “just work”. Specifying the folder in tsconfig.json is not required.
Can you please give some more specific details about what errors you are encountering as well as double checking your CLI version with block --version?
Here’s a brief example (where hello-world-typescript-block is a block directory with package.json, .block, etc). I will see if we can publish this example as a standalone repo with all files included.
hello-world-shared/index.tsx
import React, {useState} from 'react';
export function Hello() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
hello-world-shared/package.json
{
"name": "hello-world-shared",
"version": "1.0.0",
"description": "",
"main": "index.jsx",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"peerDependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0"
}
}
hello-world-typescript-block/frontend/index.tsx
import {initializeBlock} from '@airtable/blocks/ui';
import React from 'react';
import {Hello} from '../../hello-world-shared';
function HelloWorldTypescriptApp() {
// YOUR CODE GOES HERE
return (
<div>
<Hello /> world! 🚀
</div>
);
}
initializeBlock(() => <HelloWorldTypescriptApp />);
hello-world-typescript-block/frontend/tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es2018",
"sourceMap": true,
"allowSyntheticDefaultImports": true,
"jsx": "react"
},
"exclude": ["node_modules"]
}
