Skip to content

Fix unresolvable Vue typings #203

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Hawxy wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix unresolvable Vue typings #203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions apps/vue/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,12 @@
},
"dependencies": {
"@flatfile/vue": "*",
"@vue/babel-plugin-jsx": "^1.2.2",
"@flatfile/plugin-record-hook": "^1.6.0",
"vue": "^3.3.4"
"@flatfile/plugin-record-hook": "^1.7.1",
"vue": "^3.5.10"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^3.1.0",
"vite": "^4.4.5",
"vue-tsc": "^1.8.5"
"@vitejs/plugin-vue": "^5.1.4",
"vite": "^5.4.8",
"vue-tsc": "^2.1.6"
}
}
99 changes: 44 additions & 55 deletions apps/vue/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,55 @@
<script lang="jsx">
import { ref, onMounted, h, defineComponent } from 'vue'
<template>
<div>
<div class="description">
<button @click="toggleSpace">Open space</button>
</div>

<Space />
</div>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import { initializeFlatfile } from '@flatfile/vue'
import { workbook } from './config'
import { listener } from './listener'

const FLATFILE_PUBLISHABLE_KEY = 'your_key'

export default defineComponent({
setup() {
const publishableKey = FLATFILE_PUBLISHABLE_KEY
const spaceProps = ref({
// apiUrl: 'https://platform.flatfile.com/api',
name: 'Trste!',
publishableKey,
workbook,
listener,
document: {
title: 'Instructions',
body:
'# Supported file types\n' +
'---\n' +
'Please only import CSV and Excel files',
defaultPage: true,
},

themeConfig: { primaryColor: '#546a76', textColor: '#fff' },
userInfo: {
name: 'my space name',
},
spaceInfo: {
name: 'my space name',
},
displayAsModal: true,
spaceBody: {},
sidebarConfig: {
showSidebar: true,
},
})

const { Space, OpenEmbed } = initializeFlatfile(spaceProps.value)

const toggleSpace = () => {
OpenEmbed()
}

return {
toggleSpace,
Space,
}
const publishableKey = FLATFILE_PUBLISHABLE_KEY
const spaceProps = ref({
// apiUrl: 'https://platform.flatfile.com/api',
name: 'Trste!',
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Typo in 'name' property of 'spaceProps'

The name property is set to 'Trste!', which might be a typo. Consider correcting it to 'Test!' or your intended space name.

Apply this diff to fix the typo:

-  name: 'Trste!',
+  name: 'Test!',
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
name: 'Trste!',
name: 'Test!',

publishableKey,
workbook,
listener,
document: {
title: 'Instructions',
body:
'# Supported file types\n' +
'---\n' +
'Please only import CSV and Excel files',
defaultPage: true,
},
render(props, ctx) {
const Space = props.Space

return (
<div>
<div class="description">
<button onClick={props.toggleSpace}>Open space</button>
</div>

<Space />
</div>
)
themeConfig: { root: { primaryColor: '#546a76', textColor: '#fff' }},
userInfo: {
name: 'my space name',
},
spaceInfo: {
name: 'my space name',
},
displayAsModal: true,
spaceBody: {},
sidebarConfig: {
showSidebar: true,
},
})

const { Space, OpenEmbed } = initializeFlatfile(spaceProps.value)

const toggleSpace = () => {
OpenEmbed()
}
</script>
131 changes: 59 additions & 72 deletions apps/vue/src/Simplified.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,22 @@
<template>

<script lang="jsx">
import { ref, onMounted, h, defineComponent } from 'vue';
<div>
<div class="description">
<button @click="toggleSpace()">{{ showSpace ? 'Close' : 'Open' }} space</button>
</div>

<div class="space-wrapper" v-if="showSpace">
<Space />
</div>
</div>
Comment on lines +5 to +11
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

⚠️ Potential issue

Review the toggle logic for 'showSpace' and usage of 'OpenEmbed()'.

There appears to be a potential conflict between toggling showSpace to conditionally render <Space /> in the template and calling OpenEmbed() in the toggleSpace function. If OpenEmbed() handles displaying the Flatfile Space modal independently, managing showSpace might be redundant or cause inconsistent UI states. Consider the following:

  • Option 1: Rely solely on OpenEmbed() to open the Space modal and remove showSpace and the conditional <Space /> rendering.
  • Option 2: Use showSpace to control the visibility of <Space /> and remove the OpenEmbed() call if unnecessary.

Also applies to: 45-90


</template>


<script setup lang="ts">
import { ref } from 'vue';
import { initializeFlatfile } from '@flatfile/vue';
import { workbook } from "./config";
import { listener } from './listener'


const SPACE_ID = 'us_sp_12314';
const ENVIRONMENT_ID = 'us_env_1234';
Expand All @@ -29,76 +42,50 @@ const sheet = {
],
}

export default defineComponent({
setup() {
const showSpace = ref(false);
const publishableKey = 'sk_1234';
const environmentId = ENVIRONMENT_ID;
const spaceProps = ref({
name: 'Trste!',
environmentId,
publishableKey,
sheet,
onSubmit: async ({job, sheet}) => {
const data = await sheet.allData()
output.value = JSON.stringify(data, " ", 2)
console.log('onSubmit', data)
},
onRecordHook: (record, event) => {
const firstName = record.get('firstName')
const lastName = record.get('lastName')
if (firstName && !lastName) {
record.set('lastName', 'Rock')
record.addInfo('lastName', 'Welcome to the Rock fam')
}
return record
},
closeSpace: {
operation: 'submitActionFg',
onClose: () => { showSpace.value = false; },
},
themeConfig: { primaryColor: "#546a76", textColor: "#fff" },
userInfo: {
name: 'my space name'
},
spaceInfo: {
name: 'my space name'
},
displayAsModal: true,
spaceBody: {
metadata: {
random: 'param'
}
}
});

const { Space, OpenEmbed } = initializeFlatfile(spaceProps.value);

const toggleSpace = () => {
showSpace.value = !showSpace.value;
OpenEmbed()
};

return {
toggleSpace,
showSpace,
Space
const showSpace = ref(false);
const publishableKey = 'sk_1234';
const environmentId = ENVIRONMENT_ID;
const spaceProps = ref({
name: 'Trste!',
environmentId,
publishableKey,
sheet,
onSubmit: async ({ job, sheet }: { job: any, sheet: any }) => {
const data = await sheet.allData()
console.log('onSubmit', data)
},
Comment on lines +53 to +56
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance type safety by specifying exact types in 'onSubmit'.

The onSubmit function currently uses any types for job and sheet. To leverage TypeScript's benefits, consider importing and using the specific types provided by @flatfile/vue or defining appropriate interfaces:

import { FlatfileJob, FlatfileSheet } from '@flatfile/vue';

// ...

onSubmit: async ({ job, sheet }: { job: FlatfileJob; sheet: FlatfileSheet }) => {
  // ...
},

onRecordHook: (record: any, event: any) => {
const firstName = record.get('firstName')
const lastName = record.get('lastName')
if (firstName && !lastName) {
record.set('lastName', 'Rock')
record.addInfo('lastName', 'Welcome to the Rock fam')
}
return record
Comment on lines +57 to +64
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Specify precise types in 'onRecordHook' for better type safety.

In the onRecordHook function, record and event are typed as any. Define or import appropriate types to enhance type checking and reduce potential runtime errors:

import { FlatfileRecord, FlatfileEvent } from '@flatfile/vue';

// ...

onRecordHook: (record: FlatfileRecord, event: FlatfileEvent) => {
  // ...
},

},
render(props, ctx) {
const Space = props.Space

return (
<div>
<div class="description">
<button onClick={props.toggleSpace}>{ props.showSpace ? 'Close' : 'Open' } space</button>
</div>

{props.showSpace && <div class="space-wrapper">
<Space />
</div>}
</div>
)
closeSpace: {
operation: 'submitActionFg',
onClose: () => { showSpace.value = false; },
},
themeConfig: { root: { primaryColor: "#546a76", textColor: "#fff" } },
userInfo: {
name: 'my space name'
},
spaceInfo: {
name: 'my space name'
},
displayAsModal: true,
spaceBody: {
metadata: {
random: 'param'
}
}
});

const { Space, OpenEmbed } = initializeFlatfile(spaceProps.value);
Comment on lines +48 to +85
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Simplify 'spaceProps' by removing unnecessary 'ref'.

Since spaceProps does not appear to require reactivity, you can define it as a plain object. This eliminates the need to access .value when initializing Flatfile:

-const spaceProps = ref({
+const spaceProps = {
  // ...properties
-});
+};

Update the initialization accordingly:

-const { Space, OpenEmbed } = initializeFlatfile(spaceProps.value);
+const { Space, OpenEmbed } = initializeFlatfile(spaceProps);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const spaceProps = ref({
name: 'Trste!',
environmentId,
publishableKey,
sheet,
onSubmit: async ({ job, sheet }: { job: any, sheet: any }) => {
const data = await sheet.allData()
console.log('onSubmit', data)
},
onRecordHook: (record: any, event: any) => {
const firstName = record.get('firstName')
const lastName = record.get('lastName')
if (firstName && !lastName) {
record.set('lastName', 'Rock')
record.addInfo('lastName', 'Welcome to the Rock fam')
}
return record
},
render(props, ctx) {
const Space = props.Space
return (
<div>
<div class="description">
<button onClick={props.toggleSpace}>{ props.showSpace ? 'Close' : 'Open' } space</button>
</div>
{props.showSpace && <div class="space-wrapper">
<Space />
</div>}
</div>
)
closeSpace: {
operation: 'submitActionFg',
onClose: () => { showSpace.value = false; },
},
themeConfig: { root: { primaryColor: "#546a76", textColor: "#fff" } },
userInfo: {
name: 'my space name'
},
spaceInfo: {
name: 'my space name'
},
displayAsModal: true,
spaceBody: {
metadata: {
random: 'param'
}
}
});
const { Space, OpenEmbed } = initializeFlatfile(spaceProps.value);
const spaceProps = {
name: 'Trste!',
environmentId,
publishableKey,
sheet,
onSubmit: async ({ job, sheet }: { job: any, sheet: any }) => {
const data = await sheet.allData()
console.log('onSubmit', data)
},
onRecordHook: (record: any, event: any) => {
const firstName = record.get('firstName')
const lastName = record.get('lastName')
if (firstName && !lastName) {
record.set('lastName', 'Rock')
record.addInfo('lastName', 'Welcome to the Rock fam')
}
return record
},
closeSpace: {
operation: 'submitActionFg',
onClose: () => { showSpace.value = false; },
},
themeConfig: { root: { primaryColor: "#546a76", textColor: "#fff" } },
userInfo: {
name: 'my space name'
},
spaceInfo: {
name: 'my space name'
},
displayAsModal: true,
spaceBody: {
metadata: {
random: 'param'
}
}
};
const { Space, OpenEmbed } = initializeFlatfile(spaceProps);


const toggleSpace = () => {
showSpace.value = !showSpace.value;
OpenEmbed()
};
Comment on lines +87 to +90
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Adjust 'toggleSpace' function based on the display logic chosen.

Depending on how you decide to manage the space display (as per the earlier suggestion), update the toggleSpace function accordingly:

  • If using OpenEmbed() exclusively, you might not need to toggle showSpace.value.
  • If controlling the display with showSpace, ensure toggleSpace only updates showSpace.value.

</script>
7 changes: 6 additions & 1 deletion apps/vue/src/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
export const workbook = {
import type {Flatfile} from "@flatfile/api"

export const workbook: Pick<
Flatfile.CreateWorkbookConfig,
'name' | 'labels' | 'sheets' | 'actions'
> = {
name: 'All Data',
labels: ['pinned'],
sheets: [
Expand Down
Loading