Skip to content
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.

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

Change parser to allow parsing two script tags on <script setup> #108

Merged
merged 10 commits into from
Jun 30, 2021

Conversation

ota-meshi
Copy link
Member

This PR modifies the parser so that it can parse SFCs with two script tags.
However, the parser parses the two scripts only if the SFC has both <script setup> and plain <script>.

<script>
  performGlobalSideEffect()
  export const named = 1
</script>

<script setup>
  let count = 0
</script>

Related to #78

@ota-meshi
Copy link
Member Author

ota-meshi commented Jun 16, 2021

Hmm. Can't parse the following SFCs well.

<script>
export let count = 42
</script>

<script setup>
let count = 42
</script>

The current PR implementation is a parse error because it parses as a single script.

export let count = 42

let count = 42

We need to parse it as a separate script, but I don't know how to merge the ScopeManager and parserServices generated by @typescript-eslint/parser.

@ota-meshi
Copy link
Member Author

I also considered adding {} to the <script setup> script to make it look like block scope, but we can't do this because of the import statement.

<script>
export let count = 42
</script>

<script setup>
let count = 42
</script>

export let count = 42

{
let count = 42
}

But the next SFC is an error.

<script>
export let count = 42
</script>

<script setup>
import Comp from './comp.vue'
let count = 42
</script>

export let count = 42

{
import Comp from './comp.vue'
let count = 42
}

@ota-meshi
Copy link
Member Author

Changed to parse <script setup> and split it into import statements and other statements to build source code.

For example:

<script>
export let count = 42
</script>

<script setup>
import MyComponent from './MyComponent.vue'
let count = 42
</script>

export let count = 42
;
import MyComponent from './MyComponent.vue';
{
let count = 42
}

@ota-meshi ota-meshi marked this pull request as ready for review June 18, 2021 07:42
@ota-meshi ota-meshi merged commit 2f5e7fe into master Jun 30, 2021
@ota-meshi ota-meshi deleted the multiple-scripts branch June 30, 2021 04:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant