Thanks to visit codestin.com
Credit goes to github.com

Skip to content

chore: rework content updates #75

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

Merged
merged 20 commits into from
Oct 11, 2024
Merged

chore: rework content updates #75

merged 20 commits into from
Oct 11, 2024

Conversation

AdrianGonz97
Copy link
Member

@AdrianGonz97 AdrianGonz97 commented Oct 9, 2024

closes #33

This PR reworks how the content method operates in adders. Defined files are assumed to be text files and require the modified content to be returned. A series of parsers and code generators will also be provided as helpers. This approach should be far more flexible and allows for surgical updates to existing code.

{
	name: () => `+layout.svelte`,
	content: ({ content, typescript }) => {
		const { script, css, generateCode } = parseSvelte(content, { typescript }); // `typescript` is passed here so the `lang="ts"` attribute is added to the `<script>` tag
		// AST manipulations...
		imports.addEmpty(script.ast, '../app.css');
		// generate svelte code
		return generateCode({
			// generate JS code the AST
			script: script.generateCode(),
			// if it's a new file, we'll just add the `<slot />`
			template: content.length === 0 ? '<slot />' : undefined,
			// if this was an existing file that was filled with content, 
			// `template` and `css` would be `undefined`. 
			// since they don't provide strings, their code blocks will remain untouched
		});
	}
},

Here's an example svelte component:

<script>
	let foo = 'bar';
</script>

<div>hello!</div>

<style>
	.foo {
		...
	}
</style>

Apply the following adder manipulation:

{
	name: () => `input.svelte`,
	content: ({ content, typescript }) => {
		const { script, css, generateCode } = parseSvelte(content);
		return generateCode({
			// replace all instances of `foo` with `baz` in `<script>`
			script: script.source.replaceAll('foo', 'baz'),
			// replace all instances of `foo` with `bar` in `<style>`
			css: css.source.replaceAll('foo', 'bar') 
		});
	}
},

Output (only the contents of <script> and <style> have changed):

<script>
	let baz = 'bar';
</script>

<div>foo!</div>

<style>
	.bar {
		...
	}
</style>

For the moment, only the tailwindcss adder has been migrated, hence the TSC errors

Copy link

pkg-pr-new bot commented Oct 9, 2024

Open in Stackblitz

pnpm add https://pkg.pr.new/sveltejs/cli/@svelte-cli/ast-tooling@75
pnpm add https://pkg.pr.new/sveltejs/cli/sv@75
pnpm add https://pkg.pr.new/sveltejs/cli/@svelte-cli/core@75

commit: cf31f32

@manuel3108
Copy link
Member

Just had a quick look through and this really feels good. Those changes totally make sense and the don't produce the overhead i initially expected.

@manuel3108 manuel3108 mentioned this pull request Oct 10, 2024
4 tasks
@benmccann benmccann changed the title chore(DRAFT): rework content updates chore: rework content updates Oct 11, 2024
@@ -161,10 +164,10 @@ export const adder = defineAdder({

const fallback = common.expressionFromString('defineConfig({})');
const { value: exportDefault } = exports.defaultExport(ast, fallback);
if (exportDefault.type !== 'CallExpression') return;
if (exportDefault.type !== 'CallExpression') return content;
Copy link
Member

Choose a reason for hiding this comment

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

there were some places like this where I had to do return content, but I wonder if it wouldn't be better to allow undefined in the return type so that we could do a simple return; to skip editing the file

Copy link
Member Author

@AdrianGonz97 AdrianGonz97 Oct 11, 2024

Choose a reason for hiding this comment

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

sure, i think we can do that. i believe we (currently) could accomplish the same effect by returning an empty string as well

Copy link
Member Author

Choose a reason for hiding this comment

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

on second thought, is this really all that bad? i feel like allowing undefined to be returned could lead to a lot of fuckups (i.e. people forgetting to return the content after manipulation)

Copy link
Member

Choose a reason for hiding this comment

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

true. it did save me from that a few times. I suppose we can always make that change in the future. Once we have tests it should provide some more protection

@benmccann benmccann merged commit ad94bf6 into main Oct 11, 2024
5 checks passed
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.

Perform update in content rather than returning AST
3 participants