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

Create a Basic plugin tutorial feedback #17182

Open
wwalc opened this issue Sep 30, 2024 · 4 comments
Open

Create a Basic plugin tutorial feedback #17182

wwalc opened this issue Sep 30, 2024 · 4 comments
Labels
type:docs This issue reports a task related to documentation (e.g. an idea for a guide).

Comments

@wwalc
Copy link
Member

wwalc commented Sep 30, 2024

📝 Provide a description of requested docs changes

(1) The tutorial assumes Husky is installed, or at least with the latest node installed via nvm it did not work for me.

Follow https://ckeditor.com/docs/ckeditor5/43.1.1/framework/tutorials/creating-simple-plugin-timestamp.html without having Husky installed.

wiktor@Wiktors-MBP starter-files % node --version 
v20.17.0
wiktor@Wiktors-MBP starter-files % ls -al        
total 24
drwxr-xr-x  5 wiktor  staff  160 Sep 30 10:34 .
drwxr-xr-x  4 wiktor  staff  128 Sep 30 10:34 ..
-rw-r--r--  1 wiktor  staff  500 Sep 30 10:34 index.html
-rw-r--r--  1 wiktor  staff  610 Sep 30 10:34 main.js
-rw-r--r--  1 wiktor  staff  422 Sep 30 10:34 package.json
wiktor@Wiktors-MBP starter-files % npm install                                                       

> ckeditor5-tutorials-examples@0.1.0 prepare
> husky

sh: husky: command not found
npm error code 127
npm error path /Users/wiktor/workspace/ckeditor5-tutorials-examples
npm error command failed
npm error command sh -c husky
npm error A complete log of this run can be found in: /Users/wiktor/.npm/_logs/2024-09-30T08_37_04_944Z-debug-0.log

(2) The order of the code in sample project is different than in docs.

Docs:

image

Real code in starter files:

image

This way it takes a little bit more time to understand what to add manually, especially that code that we introduced in the tutorial is not "marked" in any way (e.g. with code comments).

@wwalc wwalc added the type:docs This issue reports a task related to documentation (e.g. an idea for a guide). label Sep 30, 2024
@Witoso
Copy link
Member

Witoso commented Sep 30, 2024

(1) The tutorial assumes Husky is installed, or at least with the latest node installed via nvm it did not work for me.

@filipsobol I guess this is a recent change (last week?), added with the prevention to not leak mistakenly license keys. I wonder if it makes sense to have husky added as a dev dep. Also, maybe we should reconsider promoting degit?

This way it takes a little bit more time to understand what to add manually, especially that code that we introduced in the tutorial is not "marked" in any way (e.g. with code comments).

@filipsobol WDYT? Perhaps we should consider having empty files in starter, to not confuse users. Naturally, the discrepancies will appear over time in those two placements.

@filipsobol
Copy link
Member

Using degit was my first idea too. It could be as simple as:

npx degit ckeditor/ckeditor5-tutorials-examples/timestamp-plugin/starter-files ckeditor5-plugin
cd ckeditor5-plugin

We can potentially rename the repository and change file path to make the command shorter. However, I think we can go even further and simplify the projects created by package generator (when the Modern mode is selected) so that it can be used in tutorials too.

We recently had an issue, where someone followed one of the tutorials and wanted to use that plugin in another project, and there was no documentation for that. AFAIK, all tutorials have such dead end. We just assumed that whatever the developer created when following the tutorial will be deleted, or that they will somehow figure out they need to create a new project using package generator and move all code there ¯\_(ツ)_/¯

If boilerplate created by package generator was easy enough to understand for both new and experienced developers in our community, it would simplify things a lot, both for the community and us, the maintainers. This will also make the journey from learning about the editor to publishing a plugin much smoother.

I think this would be the right move.


This is a technical detail, but we should use Vite's library mode to allow not only creating and testing the code locally, but also building and publishing it for use in another project.

@Witoso
Copy link
Member

Witoso commented Sep 30, 2024

Aaand what's the shortest solution, right now, before this "onboarding" with package gen. will come to fruition? As you know, I'm a bit worried about rebuilding our plugins, etc. But I don't want to block with a discussion the first, simplest solution for the error.

@filipsobol
Copy link
Member

filipsobol commented Sep 30, 2024

I don't think there's a need for rebuilding the plugins if we go that route. Currently, 7 out of 9 starters are either empty or ~20 LOC with only imports and Editor.create() call.

The minimum-effort solution for now could be replacing git clones with appropriate npx degits in guides.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type:docs This issue reports a task related to documentation (e.g. an idea for a guide).
Projects
None yet
Development

No branches or pull requests

3 participants