-
Notifications
You must be signed in to change notification settings - Fork 85
feat: template inheritance #99
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
Conversation
|
|
Deploying tutorialkit-demo-page with
|
Latest commit: |
d7e184e
|
Status: | ✅ Deploy successful! |
Preview URL: | https://fcb625ca.tutorialkit-demo-page.pages.dev |
Branch Preview URL: | https://joan-template-extends.tutorialkit-demo-page.pages.dev |
Deploying tutorialkit-docs-page with
|
Latest commit: |
ee46769
|
Status: | ✅ Deploy successful! |
Preview URL: | https://04a27249.tutorialkit-docs-page.pages.dev |
Branch Preview URL: | https://joan-template-extends.tutorialkit-docs-page.pages.dev |
@@ -0,0 +1,4 @@ | |||
export const IGNORED_FILES = ['**/.DS_Store', '**/*.swp']; | |||
export const EXTEND_CONFIG_FILEPATH = '/.tk-config.json'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Interested to hear feedback / thoughts on the name of the config file here. 👀
I started with template.json
, then renamed it to .template.json
, then .config.json
to finally going with .tk-config.json
.
My reasoning has been: I started with template.json
because this is for templates. Then I thought, this might collide with user files, so added the starting .
. I then realised that the code would also work for _files
and _solution
because we don't distinguish them and so thought maybe a more generic name would be better. I went with .config.json
but figured that adding a tk-
prefix would make it more explicitely TutorialKit specific and help tooling like the VSCode extension, to provide a schema for the JSON.
cc @sulco
} | ||
} | ||
|
||
export class FilesMap { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I created this class to make it easier to understand the graph structure and encapsulate the logic around:
- Cycle detection (which should not throw or cause an infinite loop)
- The conversion from a node in that graph to a
Files
entity that can be JSON serialized later
if (path.sep !== '/') { | ||
return result.replaceAll('\\', '/'); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this should fix a bug on windows which I think the current TutorialKit has where files inside sub-folders will use \\
when they should use /
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've now tested this locally and it works really well, nice! 🙌
Here you can see how much code repetition I could reduce in a project that has 4 templates: AriPerkkio/tutorial-vite-plugin#6
src/templates
├── default
│ ├── content.yaml
│ ├── index.html
│ ├── index.js
│ ├── main.js
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── style.css
│ ├── vite.config.internal.ts
│ └── vite.config.ts
│
├── empty # Template that's used in terminal-only Node lesson
│ └── index.js
│
├── env-plugin
+ │ ├── .tk-config.json # { "extends": "../default" }
- │ ├── index.html
│ ├── index.js
- │ ├── main.js
- │ ├── package-lock.json
- │ ├── package.json
- │ ├── public
- │ │ └── vite.svg
│ ├── style.css
- │ ├── vite.config.internal.ts
- │ └── vite.config.ts
│
└── replace-plugin
+ ├── .tk-config.json # { "extends": "../default" }
- ├── index.html
├── main.js
- ├── package-lock.json
- ├── package.json
- ├── public
- │ └── vite.svg
├── style.css
├── tutorial-example.js
- ├── vite.config.internal.ts
- └── vite.config.ts
@AriPerkkio That is indeed a lot!! 🤯 🤯 Your PR alone really shows how useful this feature is! Thanks for suggesting it 🙌 |
docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would be good to use this vite-app-2
in some lesson in packages/template/content
.
This PR makes it possible to extend a template with another template by adding a configuration file,
.tk-config.json
with the following content:So with the following structure:
The content of
vite-app-2
andvite-app
will be identical except for theindex.html
which will be the one living invite-app
.Notes
../../node_modules/tuto-templates/foo
. So this means that if you have fixed templates that lives somewhere else, you can extend them. They won't be watched by the watcher though, so if they change it won't be reflected._files
and_solution
because it made the code simpler. It might be something people want to use in the future though so this is probably a good thing?webcontainer-files.ts
a bit with extra tests to make it easier to maintain this code.