Using node unit, I want to translate from ES5 the name of the test suite.
So I had in parser_test.js
exports['Awesome Parser Test'] = {
setUp: function(done) {
done();
},
....
}
And now I have in parser_test.es6
export default {
setUp: function(done) {
done();
},
....
}
Then in another file named index.es6
import parserTest from './parser_test';
export {
parserTest
}
Node unit displays the suite name as parserTest which is OK, but I would prefer something like Awesome Parser Test
You can't have spaces in the import name. It's just a variable which is assigned the export of the file. You can, however, call it what ever you want. Eg:
import awesomeParserTest from './parser_test';
Or
import Awesome_Parser_Test from './parser_test';
Related
I am a newbie on Svelte and in coding in general. I'd prefer to learn SvelteKit (Svelte#Next) rather than sapper since that seems to be where Svelte is heading.
For my personal project, I need to support dynamic routing based on url slugs. How do I do that in SvelteKit? For example, if I have /blog directory and need to pull content based on its "id", how would I do that?
The part that I am having difficulty with is accessing the URL slug parameter.
Thanks in advance.
you can create a file with the [brackets] : touch src/routes/blog/[slug].svelte
And paste the following code
<script>
import { page } from '$app/stores';
</script>
{$page.params.slug}
Then navigate to your app http://localhost:3000/blog/123
You should see your result
In order to create content for the http://localhost:3000/blog page, you can modify src/routes/blog/index.svelte
As of SvelteKit 1.0 the path should be a directory in brackets, e.g. for /blog/<slug> you will add the following:
src/routes/blog/[slug]
|_ +page.js
|_ +page.svelte
Then in src/routes/blog/[slug]/+page.js you can add something like
export const load = ({ params }) => {
return {
slug: params.slug
}
}
which will return it as a data property to +page.svelte, so you can write something like:
<script>
export let data;
</script>
<h1>{data.slug}</h1>
Reference: https://kit.svelte.dev/docs/routing
Caveat - the info in my reply probably may not be valid as SvelteKit matures, but from experiments I have done thus far, this works:
Parameter based routing is similar to the sveltejs/sapper-template. You should learn how Sapper does it first. Lets say I have a route blog with a single param slug (/blog/page-1 & /blog/page-2)
Create a route component in routes/blog named [slug].svelte
Copy the content from the sveltejs/sapper-template example.
Rename the preload function to load with a single parameter such as ctx
Alter the return object to append your slug property to props
export async function load(ctx) {
let slug = ctx.page.params.slug
return { props: { slug }}
}
If your blog has multiple params for the slug (/blog/2021/01/29/this-is-a-slug), you can remove [slug].svelte and create a file name [...data].svelte and change your load method to:
export async function load(ctx) {
let [year, month, day, slug] = ctx.page.params.data;
return { props: { data: { year, month, day, slug }}}
}
Don't forget to define your data property as an object. Here's a typescript example:
<script lang="ts">
export let data: { slug: string, year: number, month: number, day: number };
</script>
From there use the values as {data.slug}, etc
Happy hacking
I also had some issues with the Typescript import so here is a complete Typescript example.
Structure:
src/routes/coins/[coin_name]
|_ +page.ts
|_ +page.svelte
+page.ts:
import type { PageLoad } from './$types';
export const load: PageLoad = ({ params }) => {
return {
name: params.coin_name
}
}
export interface CoinPage{
name: string
}
+page.svelte and the use of the data:
<script lang="ts">
import type { CoinPage } from "./+page";
export let data:CoinPage;
</script>
<h1>{data.name}</h1>
I want to override an action from cart module store. I am trying to extend this CartModule by following this link
Extending and Overriding Modules Doc
I have created a file /src/modules/cart/index.ts with following code
import { VueStorefrontModuleConfig, extendModule, VueStorefrontModule } from '#vue-storefront/core/lib/module'
import { CartModule } from '#vue-storefront/core/modules/cart'
import { cartModule } from './store'
const cartExtend: VueStorefrontModuleConfig = {
key: 'cart',
store: {modules: [{key: 'cart', module: cartModule}]},
afterRegistration: function () {
console.log('Cart module extended')
}
}
extendModule(cartExtend)
export const registerModules: VueStorefrontModule[] = [CartModule]
I am getting error that CarModule type does not match with VueStorefrontModule
Also I don't know what to do next in order to make it effective. Docs are not clear about it. Please help. Thanks
If you want to overwrite action of module you don't want to extend module but store.
Here is example:
Vuestorefront has CartModule (in core) and you need to change code of action refreshTotals.
Code your in file /src/modules/cart/index.ts:
import {StorefrontModule} from '#vue-storefront/core/lib/modules';
import {extendStore} from '#vue-storefront/core/helpers';
const cartModule = {
action: {
async refreshTotals({dispatch}, payload) {
//
// your new (and better!) code ;-)
//
}
},
}
export const MyAwesomeCart: StorefrontModule = function () {
extendStore('cart', cartModule);
}
In last step register this your new module under /src/modules/client.ts:
..
...
import {CartModule} from '#vue-storefront/core/modules/cart';
import {MyAwesomeCart} from "modules/cart/index";
export function registerClientModules() {
registerModule(CartModule); // original module
registerModule(MyAwesomeCart); // your new overwiritng module
...
..
I want to access a variable gun in server and client side.
This is my module:
import Gun from 'gun/gun'
import Sea from 'gun/sea' // eslint-disable-line no-unused-vars
export const gun = Gun({
localStorage: true,
radisk: true,
peers: ['http://localhost:8765/gun']
})
If it was a Nuxt, which I want to abandon in favor of a Sapper, I would have implemented it like this:
import Gun from 'gun/gun'
import 'gun/sea'
import 'gun/lib/open'
const gun = Gun({
localStorage: true,
radisk: true,
peers: ['http://localhost:8765/gun']
})
export default ({ app }, inject) => {
inject('gun', () => gun)
}
// nuxt.config.js
...
plugins: [{ src: '#/plugins/gun.js' }]
...
Thus, I would get access to the $gun everywhere:
On the server side:
export default {
asyncData(context){
context.app.$gun()
}
}
And on the client side:
methods: {
submit() {
const gun = this.$gun()
const user = this.$gun().user()
...
}
}
And also in the template:
<template>
<div>{{ $gun }}</div>
</tempalte>
This question does not concern the use of the specific library that is being discussed in the question (gun). It can be a Websocet connection (then we would pass the ws variable sun in the same way.), or an rpc (to connect with Bitcoin) - I can give many examples where this can be important.
Somewhere I read that you need to implement this through the rollbar, somewhere I read about a regular module (es6 or .svelte) - but then I encounter a number of other problems ...
I don't really see the direct question, but I'll just guess... you're trying to use a global variable in svelte (moving from nuxt)?
Svelte uses rollup, and you should have a .rollup.config.js file in your root.
export default {
...
plugins: [
svelte({
// magic happens here
})
]
}
More documentation on (what I think your issue is) including globals.
https://svelte.dev/docs#Compile_time
&
https://github.com/rollup/rollup-plugin-svelte
I'm trying to create a helper for my test in order to simulate a model.
I'm receiving the follow error, though:
: makeInventoryObjects is not defined
My test helper:
// ../tests/helpers/make-inventory-objects.js
import Ember from 'ember';
export default Ember.Test.registerAsyncHelper('makeInventoryObjects', function() {
const inventoryObjects = [{'id': 1, 'name': 'test'}];
return inventoryObjects;
});
My start-app in helpers contains application.injectTestHelpers();
The test which is failing:
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
// I tried to import manually too and it did not work
// import makeInventoryObjects from '../../helpers/make-inventory-objects';
moduleForComponent('model-table', 'Integration | Component | model table', {
integration: true
});
test('it renders', function(assert) {
this.set('inventoryResult', makeInventoryObjects());
this.render(hbs`{{model-table inventoryResult}}`);
assert.equal(this.$().text().trim(), '');
});
Whenever I add the comment of the import, I get this error:
: _frontendTestsHelpersMakeInventoryObjects["default"] is not a function
The main reason what I've done was failing is because I was trying to initialize the helper within the startApp and that is done only for acceptance test, not integration test.
I had to rewrite my helper to:
// ../tests/helpers/make-inventory-objects.js
export default function makeInventoryObjects() {
const inventoryObjects = [{'id': 1, 'name': 'test'}];
return inventoryObjects;
});
and then import in my test with the commented line.
Also, as a side note I missed to add in my .jshintrc my test helper if I were doing acceptance test. So, it was wrong for acceptance test as well.
I'm struggling to understand Meteor 1.3's include logic.
For an app I'm trying to put together, I have in /client/main.js:
import '../imports/startup/accounts-config.js';
import '../imports/ui/body.js';
import '../imports/ui/home.js';
import '../imports/ui/map.js';
import '../imports/ui/admin.js';
...
In /imports/ui/body.js, I have (I use flow router and mainLayout is the main layout, in which all other templates are rendered):
...
Template.mainLayout.onCreated(function mainLayoutOnCreated() {
Meteor.subscribe('tasks');
Meteor.subscribe('categories');
});
...
Then I have the following function:
Template.admin.helpers({
categories() {
return Categories.find({}, { sort: { createdAt: -1 } });
},
});
If I put this function in /imports/ui/body.js, I'm able to call 'categories' in the template with name 'admin'. However, when I put this function in /imports/ui/admin.js, I get a useless exception in the javascript console:
Exception in template helper: categories#http://localho...
How is it that moving the file in which this helper is declared, while still being included in the same 'main' file, results in an exception being thrown?
You should import the desired template and the templating package at the top of your admin.js file.
import {
Template
} from 'meteor/templating';
import '.deep/admin.js';
Template.admin.helpers({
categories() {
return Categories.find({}, { sort: { createdAt: -1 } });
},
});