Now i work on kotlin-js project. And i want to Add some HTML tag in my index.html. So i want to use kotlinx.html. Is it available using kotlinx.html in kotlin-js code?
Like This one
import kotlin.browser.document
document.create.p{+"hello world}
If it isn't please let me know how to add Tag Attribute or HTML Tag using kotlin-js.
You can use kotlinx-html(npm) for js.
Download latest version of kotlinx-html from npm
npm install kotlinx-html
Here is the Readme for Kotlin/JS users. You can naturally build html as you do in kotlin/JVM.
Related
I am wanting to build a website that will utilize a WYSIWYG such as ProseMirror. Their documentation is a bit clear that it is not such an easy process to build everything yet, as they have focused on other parts of development first. However, they do provide a project that you can clone and run.
I am not sure how to actually run this example however.
I have created a new folder inside my active MAMP directory, and have done npm install to get all of the items in the package.json. Then I have run npm run build so that the project is now built into the dist folder specified by default in the package.json.
However, how do I actually make it run in the browser? If I go to the browser, it is simply showing my a list of files and documents, rather than the actual application.
I have also tried running npm start but that doesn't have any linked commands in the package.json. I do see that this is using rollup.js. I have not used that before, perhaps that has some commands?
I created this guide for a friend. Hope this helps you and anyone looking for the same answer. It's not perfect but gets you up and running.
ProseMirror is a well-behaved rich semantic content
editor based on contentEditable, with support for
collaborative editing and custom document schemas.
The problem is that the documentation on how to set
it up from nothing to a hello world using the demo
examples is non existent. All documentation assumes
you have it set up and working.
This guide is to help you get to "hello world" stage
• First setup rollup. Follow the instructions for that here.
You should now have the project on your computer
from this and when you open the html file in your browser see the "hello world" style screen.
• cd into learn-rollup project folder and npm install prosemirror module packages:
prosemirror-state.
prosemirror-view.
prosemirror-model
prosemirror-schema-basic
prosemirror-schema-list
prosemirror-example-setup
• In the learn-rollup index.html file add the following html
html code to add to learn-rollup index.html
The link to the css file
The tag in body that has id=editor
learn-rollup folder structure
• Create a copy of src/scripts/main.js and rename it
mainbackup.js.
• Now replace everything in main.js with code from prosemirror.net first example.
• Run \node_module.bin\rollup -c
• Reload .html to see prosemirror working.
There is no 'Hello World' example that shows how to use the prosemirror libraries in themselves - the basic example linked to in the question still needs to be 'used', as shown in the closest thing that exists to a 'Hello World' example: https://prosemirror.net/examples/basic/ - which from the docs looks like it can be represented in a simpler way:
import {schema} from "prosemirror-schema-basic"
import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
let state = EditorState.create({schema})
let view = new EditorView(document.body, {state})
Instead you can look at wrapper libraries that provide copy/paste editors and that can be incorporated into your project.
Using ProseMirror core libraries requires that you read the docs - there is both an overview section: http://prosemirror.net/docs/guide/#intro, and a reference section: http://prosemirror.net/docs/ref/#top.intro
If you go to the basic example, you will see some code that uses the example project that you linked to.
That project needs to be better documented, IMHO. I don't think that it's supposed to be an example of running prose mirror, but more of an example of wiring all of the different parts up together.
All of the parts of ProseMirror are on NPM and can be installed that way, even the example project. Install the imports from NPM and then copy that code into either an index.js or HTML file and you should have a basic editor on screen. Study the basic example repo to better understand how the parts fit together.
To get a minimal editor up and running with rollup first install rollup:
npm i -g rollup
Install the rollup resolve plugin:
npm i #rollup/plugin-node-resolve
Then add the following to the rollup.config.js file:
import resolve from '#rollup/plugin-node-resolve'
export default {
input: 'main.js',
output: {
file: 'build.js',
format: 'iife'
},
plugins: [resolve()]
}
Install prosemirror basic libraries:
npm i prosemirror-schema-basic prosemirror-state prosemirror-view
Create the main.js file with the following content:
import {schema} from 'prosemirror-schema-basic'
import {EditorState} from 'prosemirror-state'
import {EditorView} from 'prosemirror-view'
let state = EditorState.create({schema})
window.view = new EditorView(document.querySelector('#editor'), {state})
Build your editor (to build.js):
rollup -c
Finally include build.js and optionally the styles in the prosemirror-view package into your HTML file and enjoy:
<html>
<body>
<div id="editor"></div>
<script src="build.js"></script>
</body>
</html>
I went through #Rob 's method and almost succeed. Just one thing, after completed all steps, I ran into an error(see below).
The code is from the official first example.
Don't know why that happened, I have to manually put a <div id="content"></div> after <div id="editor"></div> to get started.
But shouldn't <div id="content"></div> gets added automatically? #Rob or The official first example didn't mention you have to add this div, no clue what went wrong.
I am using vue js 2.3.o version.
I want to use plugin for handling modal windows e.g. vue-js-modal (https://github.com/euvl/vue-js-modal).
I add library to my page when I want to use it.
<script type="text/javascript" src="/lib/vuejs/index.js"></script>
I put in a place before I am creating vue instance itself:
import VModal from 'vue-js-modal';
Vue.use(VModal);
var myVue = new Vue({
Then I see:
SyntaxError: import declarations may only appear at top level of a module
What I don't understand what is it about. What is wrong ? How should be this plugin correctly use ?
Thank you
It seems like you're importing the library using script tags. According to vue-js-modal's instructions, you have to use npm install vue-js-modal --save to install and then use import VModal from 'vue-js-modal' to import.
If you're using script tags to import the module, you'll have to write:
<script src="vue-js-modal.js" type="module"></script>
on your HTML page. However, for now, if you want to import modules in your browser, you'll have to do some extra steps to enable this feature. (You can follow the instructions here: link).
What I suggest is check out the demos vue-js-modal made: link, which use Babel and Webpack instead of only importing script tags. Or, when you set up your Vue web app, use their cli tool (link) to set up a starter project and then install vue-js-modal instead.
I have vuejs installed and would like to use vue admin (https://github.com/vue-bulma/vue-admin) with it, however the documentation does not mention how to use it.
For example, if I wanted to use a component from vue-admin then what are the steps?
You'll need to git clone the vue-admin project repository:
git clone https://github.com/vue-bulma/vue-admin.git my-vue-admin
Then:
cd my-vue-admin
Next, install all the dependencies:
npm install
Once all the dependencies are installed, run:
npm run dev
Wait for the compilation to finish then go to http://localhost:8080 in your browser and it should be working.
Using individual components only
If you would like to use some components only, for example: a modal component. Then find its npm package name and install it in your project.
You can either look for the name in package.json or look at the source code of the page using that component in vue-admin. For example, a modal is used here.
Vue-admin is using vue-bulma-modal component. Here is its page which can provide you with more information.
vue-admin is more of a project template, so you'd make a copy of the whole project and make changes as needed. If you want to use individual components, just install them as needed and refer to vue-admin as example
Bower: I couldn't find a Bower package for #Cycle/Core, #Cycle/DOM, do these libraries exist? I'm confused at why there is an NPM package in the first place since Cycle.js is front-end based (and NPM is specialized for back-end only).
ES5: Is it possible to use Cycle.js with Gulp/Typescript/ES5 (and not use Browserify/webpack)?
npm is not specialized for back-end only. It is for everything.1
It is possible to use Cycle.js without browserify or webpack. The library comes with ES5 distribution files, found in the dist directory.
Yes, you can use Gulp, TypeScript and ES5 with Cycle.js.
Everything Frederik said, plus here is a standalone Cycle.js example on codepen. You can see the links to the JavaScript files being loaded by clicking on Settings, then JavaScript. Here they are for convenience:
https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.all.js
https://rawgit.com/cyclejs/cycle-core/master/dist/cycle.js
https://rawgit.com/cyclejs/cycle-dom/master/dist/cycle-dom.js
Full example is on codepen
Or you can try stealjs.
At runtime it downloads your dependencies.
I use npm to get the packages, gulp to move the packages to wwwroot. TypeScript to downcompile, and systemjs to load the modules. No webpack or bower required.
I am creating a semi-automatic build pipeline for my application using npm, Gulp, and browserify. This is what I'm trying to accomplish:
Have page specific files which I can include via script tags (i.e. page1.js, page2.js, ...)
Factor out my custom code that is shared inbetween the page specific scripts as common.js.
Extract vendor libraries (i.e. bootstrap, jquery) installed via npm into vendor.js.
I'm having trouble combining browserify and browserify-shim for my application. In my webpage, I include vendor.js, common.js, and page1.js. When I try to load the page and my script is trying to require('bootstrap'), an exception is thrown here:
// Part of bootstrap.js
if (typeof jQuery === 'undefined') {
throw new Error('Bootstrap\'s JavaScript requires jQuery')
}
I expect to have to tell browserify-shim that bootstrap depends on jquery, that it expects jquery's export to be bound to the jQuery variable. I attempted to do this in my package.json.
I'm having trouble pinpointing exactly what is going wrong. I've tried various permutations of values to go into bootstrap's shim (jquery:jQuery, jquery:$, jquery) to no avail. I've also tried including and omitting various values in the browser path. I also tried building the vendor bundle via the command line using: ./node_modules/.bin/browserify -r jquery -r bootstrap > vendor.js, but the same error comes up on the browser. A lot of questions have been asked about browserify-shim and factor-bundle, but none of them address anyone trying to combine the two.
I have created a repository that demonstrates the issue here. Steps to install and reproduce are in the README. https://github.com/linkleonard/browserify-shim-factor-bundle